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 相关文章推荐
JQuery 初体验(建议学习jquery)
Apr 25 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
Mar 02 Javascript
javascript编码的几个方法详细介绍
Jan 06 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
Vue项目中如何引入icon图标
Mar 28 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
May 04 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
原生实现一个react-redux的代码示例
Jun 08 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 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
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
PHP安全技术之 实现php基本安全
2010/09/04 PHP
PHP 观察者模式的实现代码
2013/05/10 PHP
php调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
php支付宝接口用法分析
2015/01/04 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
javascript下判断一个对象是否具有指定名称的属性的的代码
2010/01/11 Javascript
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
javascript计时器详解
2015/02/28 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
使用异步组件优化Vue应用程序的性能
2019/04/28 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
Python和php通信乱码问题解决方法
2014/04/15 Python
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
企业承诺书格式
2014/05/21 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书
企业党建工作总结2015
2015/05/26 职场文书
汽车销售合同文本
2019/08/08 职场文书