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 相关文章推荐
大家未必知道的Js技巧收藏
Apr 07 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
Aug 01 Javascript
JavaScript对数组进行随机重排的方法
Jul 22 Javascript
js实现无缝滚动特效
Dec 20 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
js 轮播效果实例分享
Dec 28 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
深入浅析var,let,const的异同点
Aug 07 Javascript
jquery.pager.js实现分页效果
Jul 29 jQuery
使用zrender.js绘制体温单效果
Oct 31 Javascript
用Angular实现一个扫雷的游戏示例
May 15 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
如何实现一个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
Smarty+QUICKFORM小小演示
2007/02/25 PHP
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
php中将汉字转换成拼音的函数代码
2012/09/08 PHP
php自动加载机制的深入分析
2013/06/08 PHP
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
php进行支付宝开发中return_url和notify_url的区别分析
2014/12/22 PHP
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
JavaScript自定义分页样式
2017/01/17 Javascript
express默认日志组件morgan的方法
2018/04/05 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
JavaScript常用工具方法封装
2019/02/12 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
python基础教程之序列详解
2014/08/29 Python
Python实现曲线点抽稀算法的示例
2017/10/12 Python
python机器学习之KNN分类算法
2018/08/29 Python
python使用udp实现聊天器功能
2018/12/10 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
十佳中学生事迹材料
2014/06/02 职场文书
企业委托书范本
2014/09/13 职场文书
工作所在部门证明
2014/09/21 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
2015年党员承诺书
2015/01/21 职场文书
保护环境建议书作文500字
2015/09/14 职场文书