webpack打包非模块化js的方法


Posted in Javascript onOctober 24, 2018

本文主要记录了非模块化js如何使用webpack打包

模块化打包实现方式

webpack是模块打包工具,通过入口文件递归遍历其依赖图谱,绝对是打包神器。

bar.js

export default function bar() {
 //
}

foo.js

import bar from './bar';

bar();

通过如下,webpack配置很快实现打包。通过插件我们还可以实现文件压缩,开发态我们还可以配置sourceMap进行代码调试(chrome浏览器支持sourcemap调试)。

module.exports = {
 entry: './foo.js',
 output: {
  filename: 'bundle.js'
 },
 devtool: "source-map", 
  plugins: [
    // compress js
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true
    })
  ]
}

非模块化文件打包压缩

这里我们可以使用webpack可以配置多入口文件及ExtractTextPlugin 插件将非模块文件压缩到一个文件中。

m1.js

functon a() {
  console.log('m1 file')
}

m2.js

functon b() {
  console.log('m2 file')
}

webpack配置文件

var webpack = require('webpack')
var path = require('path')

module.exports = {
  entry: {
    'app': [
      './src/a.js',
      './src/b.js'
    ]
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js"
  }
}

打包后,发现我去不能运行??原因是webpack打包会将每个文件内容放入闭包函数中,我们去调用闭包中的函数,当然不行啦。

/******/ (function(modules) { // webpackBootstrap
/******/  // The module cache
/******/  var installedModules = {};
/******/
/******/  // The require function
/******/  function __webpack_require__(moduleId) {
/******/
/******/    // Check if module is in cache
/******/    if(installedModules[moduleId]) {
/******/      return installedModules[moduleId].exports;
/******/    }
/******/    // Create a new module (and put it into the cache)
/******/    var module = installedModules[moduleId] = {
/******/      i: moduleId,
/******/      l: false,
/******/      exports: {}
/******/    };
/******/
/******/    // Execute the module function
/******/    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/    // Flag the module as loaded
/******/    module.l = true;
/******/
/******/    // Return the exports of the module
/******/    return module.exports;
/******/  }
/******/
/******/
/******/  // expose the modules object (__webpack_modules__)
/******/  __webpack_require__.m = modules;
/******/
/******/  // expose the module cache
/******/  __webpack_require__.c = installedModules;
/******/
/******/  // define getter function for harmony exports
/******/  __webpack_require__.d = function(exports, name, getter) {
/******/    if(!__webpack_require__.o(exports, name)) {
/******/      Object.defineProperty(exports, name, {
/******/        configurable: false,
/******/        enumerable: true,
/******/        get: getter
/******/      });
/******/    }
/******/  };
/******/
/******/  // getDefaultExport function for compatibility with non-harmony modules
/******/  __webpack_require__.n = function(module) {
/******/    var getter = module && module.__esModule ?
/******/      function getDefault() { return module['default']; } :
/******/      function getModuleExports() { return module; };
/******/    __webpack_require__.d(getter, 'a', getter);
/******/    return getter;
/******/  };
/******/
/******/  // Object.prototype.hasOwnProperty.call
/******/  __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/  // __webpack_public_path__
/******/  __webpack_require__.p = "";
/******/
/******/  // Load entry module and return exports
/******/  return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {

__webpack_require__(1);
module.exports = __webpack_require__(2);


/***/ }),
/* 1 */
/***/ (function(module, exports) {

 

/***/ }),
/* 2 */
/***/ (function(module, exports) {

function b() {
  console.log('b file')
}

/***/ })
/******/ ]);
//# sourceMappingURL=app.js.map

怎么办呢?我们可以对我们当前代码进行修改,让所有函数或属性都能通过window对象调用即可。

(function(Demo) {
  
  Demo.module1 = {
    msg:function() {
      return 'Hello World';
    }

  }
})(window.Demo = window.Demo || {})

所以我们对于上面闭包形式且所有对象都挂在window对象这种类型代码,不会出现函数调用不到现象。通过webpack压缩后一样正常运行

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
js动画效果制件让图片组成动画代码分享
Jan 14 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
javascript引用类型指针的工作方式
Apr 13 Javascript
JavaScript 动态加载脚本和样式的方法
Apr 13 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
js简单时间比较的方法
Aug 02 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 Javascript
vue使用vue-cli快速创建工程
Jul 28 Javascript
Angular实现表单验证功能
Nov 13 Javascript
基于wordpress的ajax写法详解
Jan 02 Javascript
如何实现一个webpack模块解析器
Oct 24 #Javascript
vue项目中使用Svg的方法
Oct 24 #Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 #Javascript
小程序云开发初探(小结)
Oct 24 #Javascript
vue-cli V3.0版本的使用详解
Oct 24 #Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
Oct 24 #Javascript
vue 属性拦截实现双向绑定的实例代码
Oct 24 #Javascript
You might like
php后台如何避免用户直接进入方法实例
2013/10/15 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
PHP实现递归无限级分类
2015/10/22 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
编写兼容IE和FireFox的脚本
2009/05/18 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
javascript使用正则表达式检测IP地址
2014/12/03 Javascript
Web开发必知Javascript技巧大全
2016/02/23 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
详解微信小程序-canvas绘制文字实现自动换行
2019/04/26 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
js实现星星海特效的示例
2020/09/28 Javascript
[02:41]辉夜杯现场一家三口 “我爸玩风行 我玩血魔”
2015/12/27 DOTA
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
Python warning警告出现的原因及忽略方法
2020/01/31 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
浅谈Pycharm的项目文件名是红色的原因及解决方式
2020/06/01 Python
What's the difference between deep copy and shallow copy? (深拷贝与浅拷贝有什么区别)
2015/11/10 面试题
先进班级集体事迹材料
2014/01/30 职场文书
装修设计师求职信
2014/02/26 职场文书
医院信息公开实施方案
2014/05/09 职场文书
电子信息工程专业求职信
2014/06/28 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
领导班子整改方案
2014/10/25 职场文书
群众路线自查报告及整改措施
2014/11/04 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
律师函格式范本
2015/05/27 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers