本文主要記錄了非模塊化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壓縮后一樣正常運行
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
