webpack 對(duì)于前端開發(fā)工程師可能并不陌生。webpack 是前端資源模塊化管理和打包工具，可以將許多松散的模塊按照依賴和規(guī)則打包符合生成環(huán)境部署的前端資源。webpack 可以按需加載的模塊進(jìn)行代碼分隔，也可以異步加載所需模塊。webpack 通過 loader 的代碼轉(zhuǎn)換，可以將任何形式的資源都視為模塊（CommonJS 模塊 AMD 模塊 ES6 CSS JSX Json less sass）來加載。

多當(dāng)下 modern 框架都使用 webpack 作為項(xiàng)目管理和打包工具

目標(biāo)：掌握 webpack，并可以將他實(shí)際應(yīng)用到項(xiàng)目中。

基本要求：熟悉 javascript 的前端工程師

安裝 webpack

創(chuàng)建一個(gè)項(xiàng)目（創(chuàng)建一個(gè)文件夾，使用 npm init -y 初始化項(xiàng)目）

首先需要全局安裝 npm install -g webpack(-g 表示全局安裝）

然后在項(xiàng)目下運(yùn)行 npm install webpack --save-dev 命令來安裝 webpack

然后創(chuàng)建一個(gè)簡單項(xiàng)目以便演示 webpack 是如何管理和打包前端項(xiàng)目，項(xiàng)目結(jié)構(gòu)如下圖。

打開 index.html 看一下效果，很簡單，單擊“隱藏列表”按鈕，隱藏列表然后按鈕文字變?yōu)椤帮@示列表”。再次單擊按鈕來顯示列表。

在 package.json 添加 build 腳本來執(zhí)行 webpack 第一個(gè)參數(shù)為入口文件 第二個(gè)參數(shù)為輸出文件。

簡單說明一下 dom-loader.js 中提供了通過 document.querySelector 獲取的一系列 dom 對(duì)象。要使用 webpack 將文件中的 dom 對(duì)象 export 給 app.js （以使用），我們需要對(duì)文件 dom-loader.js 進(jìn)行處理，通過 export 關(guān)鍵將這些 dom 向外 export。

然后在 app.js 可以將這些 dom 對(duì)象導(dǎo)入來使用

這樣我們就在 app.js 和?dom-loader.js 建立了依賴關(guān)系。

在終端（cmd）中運(yùn)行 npm run build 后，在目錄下多了 dist/bundle.js(我們在命令行定義出口文件）

寫下來在 index.html 中將 webpack 生成的 bundle.js 引入。注釋掉原有 dom-loader.js 和 app.js 文件。

如果在 webpack 命令上添加 -p(壓縮生成 bundle.js) 以完成部署時(shí)所需的 js 文件。

打開通過運(yùn)行 npm run build:prod 命令生成的 bundle.js 如下圖。

打開 chrome 瀏覽器的開發(fā)者工具來查看文件，發(fā)現(xiàn)文件都是 0b

我們需要啟動(dòng)服務(wù)來啟動(dòng)項(xiàng)目

webpack-dev-server是一個(gè)小型的Node.js Express服務(wù)器,它使用webpack-dev-middleware來服務(wù)于 webpack的包,除此自外，它還有一個(gè)通過Sock.js來連接到服務(wù)器的微型運(yùn)行時(shí).

devserver 作為 Webpack 配置選項(xiàng)中的一項(xiàng)，具有以下配置選項(xiàng)

?contentBase 默認(rèn) webpack-dev-server 會(huì)為根文件夾提供本地服務(wù)器，如果想為另外一個(gè)目錄下的文件提供本地服務(wù)器，應(yīng)該在這里設(shè)置其所在目錄（本例設(shè)置到“public"文件夾下）.

?port 設(shè)置默認(rèn)監(jiān)聽端口，如果省略，默認(rèn)為"8080".

inline 設(shè)置為 true，當(dāng)源文件改變時(shí)會(huì)自動(dòng)刷新頁面.

historyApiFallback 在開發(fā)單頁應(yīng)用時(shí)非常有用，它依賴于 HTML5 history API，如果設(shè)置為 true，所有的跳轉(zhuǎn)將指向 index.html.

安裝?webpack-dev-server

然后在 package.json 文件中在 build 腳本將 webpack 替換為 webpack-dev-server 后運(yùn)行 npm run build 就會(huì)在終端看到下面內(nèi)容，我們項(xiàng)目部署到服務(wù) localhost 的 8081 端口下。

刪除 build:prod 生成的 dist 文件夾后會(huì)看到下面錯(cuò)誤。是因?yàn)?webpack-dev-server 并不是實(shí)際生產(chǎn) bundle.js 而是將 bundle.js 寫入內(nèi)存供 index.html 使用。如果不指定?--output-filename ，index.html 就無法找到 bundle.js 文件。

我們還需要對(duì) build 腳本進(jìn)行一些修改，

webpack-dev-server --entry ./src/js/app.js --output-filename ./dist/bundle.js 這樣

**修改一下項(xiàng)目結(jié)構(gòu)，將 index.html 從 src 目錄中移出到根目錄下

開始寫 webpack 配置文件

webpack 配置文件，在根目錄下創(chuàng)建 webpack.conig.js ，也可以根據(jù)需要使用其他名稱。但如果使用 webpack.config.js 無需指定 webpack 會(huì)自動(dòng)讀取該文件進(jìn)行操作。webpack.config 需要有一定固定的結(jié)構(gòu)。我們使用 nodejs 的模塊方式向外提供 config 對(duì)象

entry：可以指定一個(gè)入口起點(diǎn)（或多個(gè)入口起點(diǎn)）

output：path 應(yīng)該是一個(gè)絕對(duì)路徑，這一點(diǎn)與入口文件路徑為相對(duì)路徑不同。因?yàn)?webpack 需要在這個(gè)路徑創(chuàng)建文件并寫入內(nèi)容。

在 package.json 修改一下腳本，在運(yùn)行命令時(shí)，webpack 會(huì)讀取 webpack.config.js 中配置來找到入口文件，然后將他打包到 webpack。

測試一下 build:prod,然后看效果，沒問題。

但是運(yùn)行 build 腳本時(shí)，就報(bào)錯(cuò)出現(xiàn)問題，因?yàn)?webpack-dev-server 需要配置一下 publicPath 這個(gè)參數(shù)。

大家發(fā)現(xiàn)我們在 index.html 以 link 方式引入 css 文件

loader 用于對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換 loader 將內(nèi)聯(lián)圖像轉(zhuǎn)換為 data URL，甚至允許你直接在? JavaScript 模塊中 import CSS文件

安裝 style-loader css-loader 加載器來將 css 打包到 bundle.js 中。

然后在 app.js 中將其引入

test:?一個(gè)匹配 Loaders 所處理的文件的拓展名的正則表達(dá)式（必須）

rules:?允許你在 webpack 配置中指定多個(gè) loader。。

要將? css 文件導(dǎo)入到 javascript 文件中需要使用 css-loader.

注釋掉 index.html 中的 link 取消引用的樣式，然后運(yùn)行 npm run build 發(fā)現(xiàn)樣式丟失了

因?yàn)?css-loader 僅是將 css 加載到 javascript 文件中，并沒有將樣式表寫入到 html 中，所以我們看不到效果。需要加載 style-loader 來完成這個(gè)任務(wù)。

** 注意加載器的順序