本文主要记录了非模块化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压缩后一样正常运行
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。
新闻热点
疑难解答
