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 相关文章推荐
IE JS编程需注意的内存释放问题
Jun 23 Javascript
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
javascript实现动态侧边栏代码
Feb 19 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
Apr 10 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 Javascript
vue项目中使用百度地图的方法
Jun 08 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
vue移动端项目缓存问题实践记录
Oct 29 Javascript
基于axios 的responseType类型的设置方法
Oct 29 Javascript
JavaScript实现移动小精灵的案例代码
Dec 12 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数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
php调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
CI框架使用composer安装的依赖包步骤与方法分析
2016/11/21 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
Javascript模板技术
2007/04/27 Javascript
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
Python装饰器的函数式编程详解
2015/02/27 Python
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
Python简单基础小程序的实例代码
2019/04/28 Python
Python 画出来六维图
2019/07/26 Python
Python下应用opencv 实现人脸检测功能
2019/10/24 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
Python运行异常管理解决方案
2020/03/09 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
鲜果饮品店创业计划书
2014/01/21 职场文书
建筑安全标语
2014/06/07 职场文书
校园活动策划方案
2014/06/13 职场文书
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
美术教师个人工作总结
2015/02/06 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书
如何设计高效合理的MySQL查询语句
2021/05/26 MySQL
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript