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 相关文章推荐
基于jquery的15款幻灯片插件
Apr 10 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
Jan 24 Javascript
JS实现判断碰撞的方法
Feb 11 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
Angular.js跨controller实现参数传递的两种方法
Feb 20 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
使用webpack编译es6代码的方法步骤
Apr 28 Javascript
JavaScript中callee和caller的区别与用法实例分析
Jun 28 Javascript
简单谈谈javascript高级特性
Sep 04 Javascript
three.js 制作动态二维码的示例代码
Jul 31 Javascript
JavaScript setTimeout()基本用法有哪些
Nov 04 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
基于mysql的论坛(3)
2006/10/09 PHP
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
AngularJs html compiler详解及示例代码
2016/09/01 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
浅谈struts1 & jquery form 文件异步上传
2017/05/25 jQuery
vue.js实现的绑定class操作示例
2018/07/06 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
2019/05/21 Javascript
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
对于Python的Django框架使用的一些实用建议
2015/04/03 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
django迁移文件migrations的实现
2020/03/31 Python
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
美国奢侈品购物平台:Orchard Mile
2018/05/02 全球购物
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
几道数据库的概念性面试题
2014/05/30 面试题
自荐信怎么写呢?
2013/12/09 职场文书
初中同学聚会邀请函
2014/02/03 职场文书
亲子活动总结
2014/04/26 职场文书
小学生安全责任书
2014/07/25 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
详解Python中的for循环
2022/04/30 Python