開始 · 前端

>[danger][前置任務安裝node及配置全局安裝路徑](http://www.hmoore.net/a173512/node/2160974) 更新 npm `\npm install -g npm` 新建存放項目的app文件夾`D:\application`，位置隨意我這里為了方便和node安裝目錄放一起了`D:\nodejs\application` 新建項目webpack-test `D:\nodejs\application\webpack-test` 窗口控制臺定位到webpack-test位置，初始化項目生成package.json ![](https://img.kancloud.cn/66/32/66323b9f91ecac92a446055f72b33267_572x33.png) ``` npm init ``` 緊接著使用 cnpm 全局安裝 webpack（安裝一次，以后就可以不用安裝了）： ![](https://img.kancloud.cn/1c/f1/1cf1a08ac6390a5f296d3fd6eb7ba765_505x45.png) >[danger] 注意cnpm和npm不要混用否則或報錯：# Error “Cannot find module 'import-local'”，出現此錯時卸載項目重新用npm和cnpm按裝 ``` npm install webpack webpack-cli -g 簡寫： npm i webpack webpack-cli -g ``` 然后在本地安裝webpack和webpack-cli：因為webpack是開發依賴（只在開發中用得到，所以后面加個 -D 它是 `--save-dev`的縮寫） ![](https://img.kancloud.cn/7a/4d/7a4d3995e9dd836840624f9ddf0013ef_470x41.png) ``` npm install webpack webpack-cli --save-dev 簡寫： npm i webpack webpack-cli -D ``` >[danger]可選 **打包含有html的文件** ~~~ npm i html-webpack-plugin -D ~~~ **打包含有css文件** 安裝css-loader style-loader插件 ``` npm i css-loader style-loader -D ``` 下載less和less-loader插件 ``` npm i less less-loader -D ``` **打包含有圖片資源** 下載url-loader、file-loader 由于打包圖片資源一般都會引入使用css/html等所以以上的要安裝 ``` npm i url-loader file-loader -D ``` 下載html-loader（當需要引入html時） ~~~ npm i html-loader -D ~~~ **打包含有其他文件** 創建項目的打包目錄 `D:\nodejs\application\dist\` 創建項目源文件，并且內容如下： `D:\nodejs\application\webpack-test\src\index.js` ``` document.write("It works."); ``` ## **在此項目目錄運行指令（包含開發環境指令和生成環境指令）** >[danger]開發環境指令和生成環境指令都是將ES6模塊化編譯成瀏覽器能識別的內容開發環境指令 ``` webpack ./src/index.js -o ./dist/built.js --mode=development ``` ![](https://img.kancloud.cn/73/8e/738e8745cb7701daa7b050a067329e5c_513x157.png) built.js ```javascript /******/ (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, { enumerable: true, get: getter }); /******/ } /******/ }; /******/ /******/ // define __esModule on exports /******/ __webpack_require__.r = function(exports) { /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); /******/ } /******/ Object.defineProperty(exports, '__esModule', { value: true }); /******/ }; /******/ /******/ // create a fake namespace object /******/ // mode & 1: value is a module id, require it /******/ // mode & 2: merge all properties of value into the ns /******/ // mode & 4: return value when already ns object /******/ // mode & 8|1: behave like require /******/ __webpack_require__.t = function(value, mode) { /******/ if(mode & 1) value = __webpack_require__(value); /******/ if(mode & 8) return value; /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; /******/ var ns = Object.create(null); /******/ __webpack_require__.r(ns); /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); /******/ return ns; /******/ }; /******/ /******/ // 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 = "./src/index.js"); /******/ }) /************************************************************************/ /******/ ({ /***/ "./src/index.js": /*!**********************!*\ !*** ./src/index.js ***! \**********************/ /*! no static exports found */ /***/ (function(module, exports) { eval("document.write(\"It works.\");\n\n//# sourceURL=webpack:///./src/index.js?"); /***/ }) /******/ }); ``` 生成環境指令 ``` webpack ./src/index.js -o ./dist/built2.js --mode=production ``` ![](https://img.kancloud.cn/dd/e6/dde6ff8b9de1a0e4def02ab513485b68_483x156.png) built2.js ``` !function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t){document.write("It works.")}]); ``` >[danger] 生成環境指令會壓縮文件 ## **驗證打包json文件** data.json ``` { 'name':'tom', 'age':18 } ``` `D:\nodejs\application\webpack-test\src\index.js` ``` import data from './data.json'; console.log(data); document.write("It works."); ``` 再次打包生成環境指令 ``` webpack ./src/index.js -o ./dist/built3.js --mode=production ``` ## **打包css文件失敗** >[danger]導入的css文件內容為空，會打包成功的，注意下！