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 相关文章推荐
XHTML-Strict 内允许出现的标签
Dec 11 Javascript
杨氏矩阵查找的JS代码
Mar 21 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 Javascript
详解Angualr 组件间通信
Jan 21 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
Mar 23 Javascript
jquery+css实现下拉列表功能
Sep 03 jQuery
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 Javascript
layui table 获取分页 limit的方法
Sep 20 Javascript
vue接通后端api以及部署到服务器操作
Aug 13 Javascript
vue实现lodop打印功能的示例
Nov 11 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/05/16 PHP
php ci 获取表单中多个同名input元素值的代码
2016/03/25 PHP
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
Span元素的width属性无效果原因及解决方案
2010/01/15 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
2015/10/29 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
jQuery实现简易的输入框字数计数功能示例
2017/01/16 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
VueJs监听window.resize方法示例
2018/01/17 Javascript
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
JavaScript如何借用构造函数继承
2019/11/06 Javascript
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
jupyter 实现notebook中显示完整的行和列
2020/04/09 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
美国网上眼镜供应商:LEOTONY(眼镜、RX太阳镜和太阳镜)
2017/10/31 全球购物
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
五分钟演讲稿
2014/04/30 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
优秀团员事迹材料
2014/12/25 职场文书
六五普法心得体会2016
2016/01/21 职场文书
人事行政部各岗位职责说明书!
2019/07/15 职场文书
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL