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实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
javascript中this关键字详解
Dec 12 Javascript
jQuery插件扩展操作入门示例
Jan 16 Javascript
React快速入门教程
Jan 17 Javascript
基于Vue过渡状态实例讲解
Sep 14 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
在vue项目中,使用axios跨域处理
Mar 07 Javascript
JS实现面向对象继承的5种方式分析
Jul 21 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
Vue退出登录时清空缓存的实现
Nov 12 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 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
让ThinkPHP支持大小写url地址访问的方法
2014/10/31 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
JS截取字符串常用方法整理及使用示例
2013/10/18 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
vue实现图片上传到后台
2020/06/29 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
python操作列表的函数使用代码详解
2017/12/28 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
解决python3中解压zip文件是文件名乱码的问题
2018/03/22 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
Django实现任意文件上传(最简单的方法)
2020/06/03 Python
WSDL的操作类型主要有几种
2013/07/19 面试题
中国梦的演讲稿
2014/01/08 职场文书
大学生毕业求职自荐书范文
2014/02/04 职场文书
库房保管员岗位职责
2014/04/07 职场文书
《陈毅探母》教学反思
2014/05/01 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
公司委托书格式范文
2014/10/09 职场文书
党风廉政建设调研报告
2015/01/01 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
大学军训心得体会800字
2016/01/11 职场文书
导游词之昭君岛
2020/01/17 职场文书
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS