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客户端脚本的设计和应用
Aug 21 Javascript
Javascript 表单之间的数据传递代码
Dec 04 Javascript
Javascript Web Slider 焦点图示例源码
Oct 10 Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 Javascript
JavaScript中的lastIndexOf()方法使用详解
Jun 06 Javascript
好好了解一下Cookie(强烈推荐)
Jun 14 Javascript
JavaScript 中 avalon绑定属性总结
Oct 19 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
Mar 19 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
May 09 Javascript
JS图片预加载三种实现方法解析
May 08 Javascript
js实现飞机大战小游戏
Aug 26 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
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
jquery按回车提交数据的代码示例
2013/11/05 Javascript
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
JS实现简单的点赞与踩功能示例
2018/12/05 Javascript
vue实现分页组件
2020/06/16 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
Python标准库os.path包、glob包使用实例
2014/11/25 Python
Python中字典的基本知识初步介绍
2015/05/21 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
Django admin美化插件suit使用示例
2017/12/12 Python
Python数据结构之图的应用示例
2018/05/11 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
解决Jupyter NoteBook输出的图表太小看不清问题
2020/04/16 Python
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
安全生产责任书范本
2014/04/15 职场文书
学校四群教育实施方案
2014/06/12 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
幼儿园食品安全责任书
2015/05/08 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书
感恩老师主题班会
2015/08/12 职场文书
《分数的意义》教学反思
2016/02/20 职场文书