每次學(xué)新東西總感覺自己是不是變笨了，看了幾個博客，試著試著就跑不下去，無奈只有去看官方文檔。 webpack是基于node的。先安裝最新的node。

1.初始化

安裝node后，新建一個目錄，比如html5。cmd中切到當(dāng)前文件夾。

npm init -y

這個命令會創(chuàng)建一個默認(rèn)的package.json。它包含了項目的一些配置參數(shù)，通過它可以進(jìn)行初始安裝。詳細(xì)參數(shù)：https://docs.npmjs.com/files/package.json。

不要y參數(shù)的話，會在命令框中設(shè)置各項參數(shù)，但覺得沒啥必要。

2.安裝webpack

npm install webpack --save-dev

將webpack安裝到當(dāng)前目錄。雖然npm install webpack -g 可以講webpack安裝到全局，但是容易出現(xiàn)一些模塊找不到的錯誤，所以最好還是安裝到當(dāng)前目錄下。

3.目錄結(jié)構(gòu)

webpack是一款模塊加載各種資源并打包的工具。所以先建一個如下的目錄結(jié)構(gòu)：

平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),游戲開發(fā),動畫培訓(xùn)

 

app包含的開發(fā)中的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 是輸出一個內(nèi)容為h1元素。export default 是ES6語法，表示指定默認(rèn)輸出。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，將其也安裝到開發(fā)目錄下面。

4.設(shè)置 webpack 配置文件

我們需要通過webpack.config.js文件告訴webpack如何開始。配置文件至少需要一個入口和一個輸出。多個頁面就需要多個入口。node的path模塊

平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),游戲開發(fā),動畫培訓(xùn)

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',
    }),
  ],
};

平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),游戲開發(fā),動畫培訓(xùn)

第一次看到這個配置文件是有點懵，主要是exports，分三個部分，一個入口，一個輸出，一個插件。入口指向了app文件夾。默認(rèn)會把包含"index.js"的文件作為入口。輸出指定了build地址和一個文件名；[name]這兒表示占位符，可以看成webpack提供的一個變量。這個具體后面再看。而HtmlWebpackPlugin會生成一個默認(rèn)的html文件。

5.打包

有了以上準(zhǔn)備，直接輸入 webpack 就能運(yùn)行了。

 平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),游戲開發(fā),動畫培訓(xùn)

 這個輸出包含了Hash(每次打包值都不同),Version,Time(耗時)。以及輸出的文件信息。 這時打開build文件夾，發(fā)現(xiàn)多了一個app.js和index.html文件，雙擊index.html：

  平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),游戲開發(fā),動畫培訓(xùn)

也可以修改下package.json

平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),游戲開發(fā),動畫培訓(xùn)

{  "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"
  }
}

平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),游戲開發(fā),動畫培訓(xùn)

指定build。在cmd中執(zhí)行npm run build 得到同樣的結(jié)果

平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),游戲開發(fā),動畫培訓(xùn)

 出現(xiàn)helloword。再看下文件內(nèi)容

index.html:

平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),游戲開發(fā),動畫培訓(xùn)

<!DOCTYPE html><html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack demo</title>
  </head>
  <body>
  <script type="text/javascript" src="app.js"></script></body></html>

平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),游戲開發(fā),動畫培訓(xùn)

默認(rèn)引用了app.js。

6、解析

app.js

平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),游戲開發(fā),動畫培訓(xùn) View Code

而app.js內(nèi)容比較多了。整體是一個匿名函數(shù)。

(function(module) {
})([(function (){}), function() {}])

app文件夾中的兩個js文件成了這兒的兩個模塊。函數(shù)最開始是從__webpack_require__開始

return __webpack_require__(__webpack_require__.s = 1);

這里指定從模塊1執(zhí)行(賦值語句的返回值為其值)。而模塊1的調(diào)用是通過__webpack_require__的這句執(zhí)行的。

modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

通過call調(diào)用模塊的主要作用是為了把參數(shù)傳過去。 

平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),游戲開發(fā),動畫培訓(xùn)

(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 */])());/***/ })

平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),游戲開發(fā),動畫培訓(xùn)

__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的默認(rèn)方法定義成了
__webpack_exports__["a"] = function () {var element = document.createElement('h1');
element.innerHTML = 'Hello world';return element;
}

所以再模塊1的定義通過"a“來獲取這個方法：

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函數(shù)有什么作用。這個注釋也不太明白，路過的大神希望可以指點下。

小結(jié)：

webpack通過一個立即執(zhí)行的匿名函數(shù)將各個開發(fā)模塊作為參數(shù)初始化，每個js文件(module)對應(yīng)一個編號，每個js中export的方法或者對象有各自指定的關(guān)鍵字。通過這種方式將所有的模塊和接口方法管理起來。然后先加載最后的一個模塊(應(yīng)該是引用別的模塊的模塊)，這樣進(jìn)而去觸發(fā)別的模塊的加載，使整個js運(yùn)行起來。到這基本了解了webpack的功能和部分原理，但略顯復(fù)雜，且沒有感受到有多大的好處。繼續(xù)探索。