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 相关文章推荐
JavaScript分秒倒计时器实现方法
Feb 02 Javascript
jquery密码强度校验
Dec 02 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
js实现抽奖效果
Mar 27 Javascript
angularjs实现首页轮播图效果
Apr 14 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
vue编译打包本地查看index文件的方法
Feb 23 Javascript
React 使用Hooks简化受控组件的状态绑定
Mar 18 Javascript
vue实现计步器功能
Nov 01 Javascript
javascript实现画板功能
Apr 12 Javascript
原生JS实现记忆翻牌游戏
Jul 31 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
超人钢铁侠联手合作?美漫作家呼吁DC漫威合作联动以抵抗疫情
2020/04/09 欧美动漫
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
drupal 代码实现URL重写
2011/05/04 PHP
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
jquery 设置style:display的方法
2015/01/29 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
2016/02/25 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
angular2 ng build部署后base文件路径问题详细解答
2017/07/15 Javascript
vue上传图片组件编写代码
2017/07/26 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
2018/03/28 Javascript
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
2019/12/04 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
Python-嵌套列表list的全面解析
2016/06/08 Python
python模块之paramiko实例代码
2018/01/31 Python
解决python matplotlib imshow无法显示的问题
2018/05/24 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
python用fsolve、leastsq对非线性方程组求解
2018/12/15 Python
Django 请求Request的具体使用方法
2019/11/11 Python
Python hmac模块使用实例解析
2019/12/24 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
销售文员的岗位职责
2013/11/20 职场文书
运动会800米加油稿
2014/02/22 职场文书
雷锋精神演讲稿
2014/05/13 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers
JavaScript 反射学习技巧
2021/10/16 Javascript