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实现表格动态分页实现代码
Jun 21 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
简介JavaScript中Boolean.toSource()方法的使用
Jun 05 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 Javascript
js HTML5 Ajax实现文件上传进度条功能
Feb 13 Javascript
JS命令模式例子之菜单程序
Oct 10 Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 Javascript
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
微信小程序开发实现消息推送
Nov 18 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 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
《魔兽争霸3》重制版究竟重制了什么?玩家:这么糊弄真的好吗?
2020/05/04 魔兽争霸
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
PHP数组去重比较快的实现方式
2016/01/19 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
Angular工具方法学习
2016/12/26 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
深入解析ES6中的promise
2018/11/08 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
2019/05/08 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
python 获取文件列表(或是目录例表)
2009/03/25 Python
介绍Python中内置的itertools模块
2015/04/29 Python
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
Python异常处理例题整理
2019/07/07 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
python实现智能语音天气预报
2019/12/02 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
网络宣传方案
2014/03/15 职场文书
葬礼司仪主持词
2014/03/31 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
试了下Golang实现try catch的方法
2021/07/01 Golang
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS
分布式Redis Cluster集群搭建与Redis基本用法
2022/02/24 Redis
springboot入门 之profile设置方式
2022/04/04 Java/Android