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 相关文章推荐
use jscript with List Proxy Server Information
Jun 11 Javascript
Javascript !!的作用
Dec 04 Javascript
围观tangram js库
Dec 28 Javascript
重载toString实现JS HashMap分析
Mar 13 Javascript
A标签中通过href和onclick传递的this对象实现思路
Apr 19 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 Javascript
Jquery使用小技巧汇总
Dec 29 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
Feb 22 Javascript
微信小程序 自定义Toast实例代码
Jun 12 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 Javascript
在vue中通过render函数给子组件设置ref操作
Nov 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
php一个找二层目录的小东东
2012/08/02 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
php实现对象克隆的方法
2015/06/20 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
PHP反射学习入门示例
2019/06/14 PHP
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
2012/02/03 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
vue.js实现表格合并示例代码
2016/11/30 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
简单谈谈JS中的正则表达式
2017/09/11 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
javascript实现拖拽碰撞检测
2020/03/12 Javascript
js重写alert事件(避免alert弹框标题出现网址)
2020/12/04 Javascript
详解在Python中处理异常的教程
2015/05/24 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
win10下python3.5.2和tensorflow安装环境搭建教程
2018/09/19 Python
Python实现App自动签到领取积分功能
2018/09/29 Python
python连接mongodb密码认证实例
2018/10/16 Python
Python中请不要再用re.compile了
2019/06/30 Python
django框架使用方法详解
2019/07/18 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例
2020/03/01 Python
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
中学生爱国演讲稿
2013/12/31 职场文书
文明礼仪小标兵事迹
2014/01/12 职场文书
计算机专业职业生涯规划范文
2014/01/19 职场文书
大学四年个人总结
2015/03/03 职场文书
办公室禁烟通知
2015/04/23 职场文书
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python