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实现的图片马赛克后显示并切换加文字功能
Apr 21 Javascript
js类中获取外部函数名的方法与代码
Sep 12 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
javascript延时加载之defer测试
Dec 28 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
webuploader模态框ueditor显示问题解决方法
Dec 27 Javascript
ES6下React组件的写法示例代码
May 04 Javascript
vue视频播放暂停代码
Nov 08 Javascript
vue实现短信验证码登录功能(流程详解)
Dec 10 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
Feb 16 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
Aug 21 Javascript
vue3中的组件间通信
Mar 31 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
论建造顺序的重要性
2020/03/04 星际争霸
落伍首发 php+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
jQuery的三种$()
2009/12/30 Javascript
nodejs命令行参数处理模块commander使用实例
2014/09/17 NodeJs
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
JavaScript清空数组元素的两种方法简单比较
2015/07/10 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
2015/10/28 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
使用JavaScript进行表单校验功能
2017/08/01 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
通过实例解析js简易模块加载器
2019/06/17 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
如何使用JavaScript实现无缝滚动自动播放轮播图效果
2020/08/20 Javascript
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
python僵尸进程产生的原因
2017/07/21 Python
python中使用psutil查看内存占用的情况
2018/06/11 Python
python requests post多层字典的方法
2018/12/27 Python
pandas 时间格式转换的实现
2019/07/06 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
拿来就用!Python批量合并PDF的示例代码
2020/08/10 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
一款纯css3实现的鼠标经过按钮特效教程
2014/11/09 HTML / CSS
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
教师拔河比赛广播稿
2014/10/14 职场文书
2014年房地产工作总结范文
2014/11/19 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书