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 相关文章推荐
如果文字过长,则将过长的部分变成省略号显示
Jun 26 Javascript
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
Add a Table to a Word Document
Jun 15 Javascript
A标签中通过href和onclick传递的this对象实现思路
Apr 19 Javascript
JS实现可关闭的对联广告效果代码
Sep 14 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 Javascript
js实现的星星评分功能函数
Dec 09 Javascript
基于js 字符串indexof与search方法的区别(详解)
Dec 04 Javascript
基于Vue中使用节流Lodash throttle详解
Oct 30 Javascript
vuex实现数据状态持久化
Nov 11 Javascript
js布局实现单选按钮控件
Jan 17 Javascript
vue 翻页组件vue-flip-page效果
Feb 05 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/08/08 PHP
php中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
php的declare控制符和ticks教程(附示例)
2014/03/21 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
jquery选择器、属性设置用法经验总结
2013/09/08 Javascript
写给小白的JavaScript引擎指南
2015/12/04 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
2017/06/25 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
详解vue-property-decorator使用手册
2019/07/29 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
Python操作Oracle数据库的简单方法和封装类实例
2018/05/07 Python
python去除拼音声调字母,替换为字母的方法
2018/11/28 Python
python可视化实现代码
2019/01/15 Python
Python 可变类型和不可变类型及引用过程解析
2019/09/27 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
Python: tkinter窗口屏幕居中,设置窗口最大,最小尺寸实例
2020/03/04 Python
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
医院护士的求职信范文
2013/12/26 职场文书
应届大学生简历中的自我评价
2014/01/15 职场文书
病媒生物防治方案
2014/05/13 职场文书
车辆工程专业求职信
2014/06/14 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
2014年度个人工作总结
2014/11/07 职场文书
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript
Java 超详细讲解十大排序算法面试无忧
2022/04/08 Java/Android
golang用type-switch判断interface的实际存储类型
2022/04/14 Golang
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android
Java Spring读取和存储详细操作
2022/08/05 Java/Android