摘要：使用讓從打包文件中刪除未使用的導(dǎo)出項(xiàng)以減少文件大小。最后，用以下內(nèi)容替換的部分在命令行中運(yùn)行將以監(jiān)視模式啟動(dòng)，當(dāng)目錄中的文件更改時(shí)，它將重新編譯。這種轉(zhuǎn)換涉及三個(gè)多帶帶的加載器和庫(kù)在配置文件中為文件添加新規(guī)則。

webpack已成為現(xiàn)代Web開發(fā)中最重要的工具之一。它是一個(gè)用于JavaScript的模塊打包工具，但是它也可以轉(zhuǎn)換所有的前端資源，例如HTML和CSS，甚至是圖片。它可以讓你更好地控制應(yīng)用程序所產(chǎn)生的HTTP請(qǐng)求數(shù)量、允許你使用其他資源的特性（例如Jade、Sass和ES6）。webpack還可以讓你輕松地從npm下載包。

本文主要針對(duì)那些剛接觸webpack的同學(xué)，將介紹初始設(shè)置和配置、模塊、加載器、插件、代碼分割和熱模塊替換。

在繼續(xù)學(xué)習(xí)下面的內(nèi)容之前需要確保你的電腦中已經(jīng)安裝了Node.js。

使用npm初始化一個(gè)新項(xiàng)目并安裝webpack：

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack@beta --save-dev
mkdir src
touch index.html src/app.js webpack.config.js

編寫下面這些文件：

// src/app.js
const root = document.querySelector("#root")
root.innerHTML = `
Hello webpack.
`

// webpack.config.js
const webpack = require("webpack")
const path = require("path")

const config = {
  context: path.resolve(__dirname, "src"),
  entry: "./app.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  module: {
    rules: [{
      test: /.js$/,
      include: path.resolve(__dirname, "src"),
      use: [{
        loader: "babel-loader",
        options: {
          presets: [
            ["es2015", { modules: false }]
          ]
        }
      }]
    }]
  }
}

module.exports = config

上面的配置是一個(gè)普通的出發(fā)點(diǎn)，它通知webpack將入口文件src/app.js編譯輸出到文件/dist/bundle.js中、使用babel將所有的.js文件從ES2015轉(zhuǎn)換成ES5。

為了讓它可以轉(zhuǎn)換到ES5格式的JS文件，我們需要安裝三個(gè)包：babel-core、webpack加載器babel-loader和預(yù)置babel-preset-es2015。使用{ modules: false }讓Tree Shaking 從打包文件中刪除未使用的導(dǎo)出項(xiàng)（exports）以減少文件大小。

npm install babel-core babel-loader babel-preset-es2015 --save-dev

最后，用以下內(nèi)容替換package.json的scripts部分：

"scripts": {
  "start": "webpack --watch",
  "build": "webpack -p"
},

在命令行中運(yùn)行npm start將以監(jiān)視模式啟動(dòng)webpack，當(dāng)src目錄中的.js文件更改時(shí)，它將重新編譯bundle.js。控制臺(tái)中的輸出展示了打包文件的信息，注意打包文件的數(shù)量和大小十分重要。

現(xiàn)在當(dāng)你在瀏覽器中加載index.html頁(yè)面時(shí)會(huì)看到"Hello webpack."。

open index.html

打開dist/bundle.js文件看看webpack都做了哪些事情，頂部是webpack的模塊引導(dǎo)代碼，底部是我們的模塊。到目前為止，你可能對(duì)于這個(gè)還沒(méi)有一個(gè)深刻的印象。但是現(xiàn)在你可以開始編寫ES6模塊，webpack將生成適用于所有瀏覽器的打包文件。

使用 Ctrl + C停止webpack，運(yùn)行npm run build以生產(chǎn)模式編譯我們的bundle.js。

注意，打包文件的大小從2.61 kB減少到了585字節(jié)。再看一下dist/bundle.js文件，你會(huì)看到大量難懂的代碼，因?yàn)槲覀兪褂肬glifyJS壓縮了它。這樣的話，我們可以使用更少的代碼達(dá)到與之前一樣的效果。

優(yōu)秀的webpack知道如何使用各種格式的JavaScript模塊，最著名的兩個(gè)是：

ES2015 import語(yǔ)句

CommonJS require()語(yǔ)句

我們可以通過(guò)安裝、導(dǎo)入lodash來(lái)測(cè)試這些格式的模塊。

npm install lodash --save

// src/app.js
import {groupBy} from "lodash/collection"

const people = [{
  manager: "Jen",
  name: "Bob"
}, {
  manager: "Jen",
  name: "Sue"
}, {
  manager: "Bob",
  name: "Shirley"
}, {
  manager: "Bob",
  name: "Terrence"
}]
const managerGroups = groupBy(people, "manager")

const root = document.querySelector("#root")
root.innerHTML = `
${JSON.stringify(managerGroups, null, 2)}
`

運(yùn)行npm start啟動(dòng)webpack并刷新index.html，你可以看到一個(gè)根據(jù)manager分組的數(shù)組。

讓我們將這個(gè)數(shù)組轉(zhuǎn)移到它自己的模塊people.js中。

// src/people.js
const people = [{
  manager: "Jen",
  name: "Bob"
}, {
  manager: "Jen",
  name: "Sue"
}, {
  manager: "Bob",
  name: "Shirley"
}, {
  manager: "Bob",
  name: "Terrence"
}]

export default people

我們可以在app.js中使用相對(duì)路徑輕松的導(dǎo)入它。

// src/app.js
import {groupBy} from "lodash/collection"
import people from "./people"

const managerGroups = groupBy(people, "manager")

const root = document.querySelector("#root")
root.innerHTML = `
${JSON.stringify(managerGroups, null, 2)}
`

注意：像lodash/collection這樣沒(méi)有相對(duì)路徑的導(dǎo)入是導(dǎo)入安裝在/node_modules的模塊，你自己的模塊需要一個(gè)類似./people的相對(duì)路徑，你可以以此區(qū)分它們。

我們已經(jīng)介紹過(guò)，你可以通過(guò)配置像babel-loader這樣的加載器來(lái)告訴webpack在遇到不同文件類型的導(dǎo)入時(shí)該怎么做。你可以將多個(gè)加載器組合在一起，應(yīng)用到很多文件轉(zhuǎn)換中。在JS中導(dǎo)入.sass文件是一個(gè)非常的例子。

這種轉(zhuǎn)換涉及三個(gè)多帶帶的加載器和node-sass庫(kù)：

npm install css-loader style-loader sass-loader node-sass --save-dev

在配置文件中為.scss文件添加新規(guī)則。

// webpack.config.js
rules: [{
  test: /.scss$/,
  use: [
    "style-loader",
    "css-loader",
    "sass-loader"
  ]
}, {
  // ...
}]

注意： 任何時(shí)候更改webpack.config.js中的任意一個(gè)加載規(guī)則都需要使用Ctrl + C和npm start重新啟動(dòng)構(gòu)建。

加載器序列以相反的順序進(jìn)行處理：

sass-loader 將Sass轉(zhuǎn)換為CSS。

css-loader 將CSS解析為JavaScript并解析所有依賴。

style-loader將我們的CSS輸出到文檔中的