webpack 入門與解析
每次學新東西總感覺自己是不是變笨了，看了幾個部落格，試著試著就跑不下去，無奈只有去看官方文件。 webpack是基於node的。先安裝最新的node。
1.初始化
安裝node後，新建一個目錄，比如html5。cmd中切到當前資料夾。
npm init -y
這個命令會建立一個預設的package.json。它包含了專案的一些配置引數，通過它可以進行初始安裝。詳細引數：https://docs.npmjs.com/files/package.json。
不要y引數的話，會在命令框中設定各項引數，但覺得沒啥必要。
2.安裝webpack
`npm` `install` `webpack --save-dev`
將webpack安裝到當前目錄。雖然npm install webpack -g 可以講webpack安裝到全域性，但是容易出現一些模組找不到的錯誤，所以最好還是安裝到當前目錄下。
3.目錄結構
webpack是一款模組載入各種資源並打包的工具。所以先建一個如下的目錄結構：
app包含的開發中的js檔案，一個元件，一個入口。build中就是用來存放打包之後的檔案的。webpack.config.js 顧名思義用來配置webpack的。package.json就不用說了。
component.js
`export` `default` `function` `() {` `var` `element = document.createElement(``'h1'``);` `element.innerHTML =` `'Hello world'``;` `return` `element;` `}`
component.js 是輸出一個內容為h1元素。export default 是ES6語法，表示指定預設輸出。import的時候不用帶大括號。
index.js
`import component from` `'./component'``;`
`document.body.appendChild(component());`
index.js 的作用就是引用Component模組，並在頁面上輸出一個h1元素。但完成這個還需要一個外掛，因為目前我們還沒有index.html檔案。
`npm` `install` `html-webpack-plugin --save-dev`
html-webpack-plugin的用來生成html，將其也安裝到開發目錄下面。
4.設定 webpack 配置檔案
我們需要通過webpack.config.js檔案告訴webpack如何開始。配置檔案至少需要一個入口和一個輸出。多個頁面就需要多個入口。node的path模組
`const path = require(``'path'``);`
`const HtmlWebpackPlugin = require(``'html-webpack-plugin'``);`
`const PATHS = {`
`app: path.join(__dirname,` `'app'``),`
`build: path.join(__dirname,` `'build'``),`
`};`
`module.exports = {`
`entry: {`
`app: PATHS.app,`
`},`
`output: {`
`path: PATHS.build,`
`filename:` `'[name].js'``,`
`},`
`plugins: [`
`new` `HtmlWebpackPlugin({`
`title:` `'Webpack demo'``,`
`}),`
`],`
`};`
第一次看到這個配置檔案是有點懵，主要是exports，分三個部分，一個入口，一個輸出，一個外掛。入口指向了app資料夾。預設會把包含"index.js"的檔案作為入口。輸出指定了build地址和一個檔名；[name]這兒表示佔位符，可以看成webpack提供的一個變數。這個具體後面再看。而HtmlWebpackPlugin會生成一個預設的html檔案。
5.打包
有了以上準備，直接輸入 webpack 就能運行了。
這個輸出包含了Hash(每次打包值都不同),Version,Time(耗時)。以及輸出的檔案資訊。這時開啟build資料夾，發現多了一個app.js和index.html檔案，雙擊index.html：
也可以修改下package.json
`{`
`"name"``:` `"Html5"``,`
`"version"``:` `"1.0.0"``,`
`"description"``:` `""``,`
`"main"``:` `"index.js"``,`
`"scripts"``: {`
`"build"``:` `"webpack"`
`},`
`"keywords"``: [],`
`"author"``:` `""``,`
`"license"``:` `"ISC"``,`
`"devDependencies"``: {`
`"html-webpack-plugin"``:` `"^2.28.0"``,`
`"webpack"``:` `"^2.2.1"`
`}`
`}`
指定build。在cmd中執行npm run build 得到同樣的結果
image
出現helloword。再看下檔案內容
index.html:
`<!DOCTYPE html>`
`<``html``>`
`<``head``>`
`<``meta` `charset``=``"UTF-8"``>`
`<``title``>Webpack demo</``title``>`
`</``head``>`
`<``body``>`
`<``script` `type``=``"text/javascript"` `src``=``"app.js"``></``script``></``body``>`
`</``html``>`
預設引用了app.js。
6、解析
app.js
`/******/` `(``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;`
`/******/` `// identity function for calling harmony imports with the correct context`
`/******/` `__webpack_require__.i =` `function``(value) {` `return` `value; };`
`/******/` `// 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 = 1);`
`/******/` `})`
`/************************************************************************/`
`/******/` `([`
`/* 0 */`
`/***/` `(``function``(module, __webpack_exports__, __webpack_require__) {`
`"use strict"``;`
`/* harmony default export */` `__webpack_exports__[``"a"``] =` `function` `() {`
`var` `element = document.createElement(``'h1'``);`
`element.innerHTML =` `'Hello world'``;`
`return` `element;
`};`
`/***/` `}),`
`/* 1 */`
`/***/` `(``function``(module, __webpack_exports__, __webpack_require__) {`
`"use strict"``;`
`Object.defineProperty(__webpack_exports__,` `"__esModule"``, { value:` `true` `});`
`/* harmony import */` `var` `__WEBPACK_IMPORTED_MODULE_0__component__ = __webpack_require__(0);`
`document.body.appendChild(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__component__[``"a"` `/* default */``])());`
`/***/` `})`
`/******/` `]);`
而app.js內容比較多了。整體是一個匿名函式。
`(``function``(module) {`
`})([(``function` `(){}),` `function``() {}])`
app資料夾中的兩個js檔案成了這兒的兩個模組。函式最開始是從webpack_require開始
`return` `__webpack_require__(__webpack_require__.s = 1);`
這裡指定從模組1執行(賦值語句的返回值為其值)。而模組1的呼叫是通過webpack_require的這句執行的。
<u>複製程式碼</u> 程式碼如下:
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
通過call呼叫模組的主要作用是為了把引數傳過去。
`(``function``(module, __webpack_exports__, __webpack_require__) {`
`"use strict"``;`
`Object.defineProperty(__webpack_exports__,` `"__esModule"``, { value:` `true` `});`
`/* harmony import */` `var` `__WEBPACK_IMPORTED_MODULE_0__component__ = __webpack_require__(0);`
`document.body.appendChild(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__component__[``"a"` `/* default */``])());`
`/***/` `})`
webpack_require 每載入一個模組都會先去模組快取中找，沒有就新建一個module物件：
`var` `module = installedModules[moduleId] = {`
`i: moduleId,`
`l:` `false``,`
`exports: {}`
`};`
模組1中載入了模組0，
`var` `__WEBPACK_IMPORTED_MODULE_0__component__ = __webpack_require__(0);`
WEBPACK_IMPORTED_MODULE_0__component 返回的是這個模組0的exports部分。而之前Component.js的預設方法定義成了
`__webpack_exports__[``"a"``] =` `function` `() {`
`var` `element = document.createElement(``'h1'``);`
`element.innerHTML =` `'Hello world'``;`
`return` `element;`
`}`
所以再模組1的定義通過"a“來獲取這個方法：
<u>複製程式碼</u> 程式碼如下:
document.body.appendChild(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__component__["a" /* default */])());
這樣就完整了，但這裡使用了webpack_require.i 將原值返回。
`/******/` `// identity function for calling harmony imports with the correct context`
`/******/` `__webpack_require__.i =` `function``(value) {` `return` `value; };`
不太明白這個i函式有什麼作用。這個註釋也不太明白，路過的大神希望可以指點下。
小結：
webpack通過一個立即執行的匿名函式將各個開發模組作為引數初始化，每個js檔案(module)對應一個編號，每個js中export的方法或者物件有各自指定的關鍵字。通過這種方式將所有的模組和介面方法管理起來。然後先載入最後的一個模組(應該是引用別的模組的模組)，這樣進而去觸發別的模組的載入，使整個js執行起來。到這基本瞭解了webpack的功能和部分原理，但略顯複雜，且沒有感受到有多大的好處。繼續探索