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跨域和ajax 跨域问题的实现思路
Sep 05 Javascript
javascript中的parseInt和parseFloat区别
Jul 12 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
Apr 10 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
理解js回收机制通俗易懂版
Feb 29 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 Javascript
原生js检测页面加载完毕的实例
Sep 11 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 Javascript
微信小程序关键字变色实现代码实例
Dec 13 Javascript
Vue+ElementUI table实现表格分页
Dec 14 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
php中$_REQUEST、$_POST、$_GET的区别和联系小结
2011/11/23 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
PHP生成可点击刷新的验证码简单示例
2016/05/13 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
jquery里的正则表达式说明
2011/08/03 Javascript
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
JavaScript版TAB选项卡效果实例
2013/08/16 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
小程序实现列表多个批量倒计时
2021/01/29 Javascript
Python 描述符(Descriptor)入门
2016/11/20 Python
python爬虫之百度API调用方法
2017/06/11 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
详解Python3 pandas.merge用法
2019/09/05 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
Clarins娇韵诗美国官网:法国天然护肤品牌
2016/09/26 全球购物
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
俄罗斯马克西多姆家居用品网上商店:Максидом
2020/02/06 全球购物
用友笔试题目
2016/10/25 面试题
手机业务员岗位职责
2013/12/13 职场文书
大学毕业生自荐书怎么写?
2014/01/06 职场文书
特色冷饮店创业计划书
2014/01/28 职场文书
怀念母亲教学反思
2014/04/28 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
法制教育讲座心得体会
2016/01/14 职场文书
Python中的xlrd模块使用整理
2021/06/15 Python
python自动化测试通过日志3分钟定位bug
2021/11/20 Python
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang