[[266801]]

Webpack已經(jīng)流行好久了，但很多同學(xué)使用webpack時(shí)還是一頭霧水，一下看到那么多文檔、各種配置、各種loader、plugin立馬就暈頭轉(zhuǎn)向了。我也不例外，以至于很長(zhǎng)一段時(shí)間對(duì)webpack都是一知半解的狀態(tài)。但是想要繼續(xù)做好前端，webpack是必須得跨過的一道坎，其實(shí)掌握webpack并不難，只是我們沒有找到正確的方法。本文就是我自己在學(xué)習(xí)webpack時(shí)的一點(diǎn)心得體會(huì)，供大家參考。

什么是webpack？

一句話概括：webpack是一個(gè)模塊打包工具（module bundler）。重點(diǎn)在于兩個(gè)關(guān)鍵詞“模塊”和“打包”。什么是模塊呢？我們回顧一下曾經(jīng)的前端開發(fā)方式，js文件通過script標(biāo)簽靜態(tài)引入，js文件之間由于沒有強(qiáng)依賴關(guān)系，如果文件1要用到文件2的某些方法或變量，則必須將文件1放到文件2后面加載。隨著項(xiàng)目的增大，js文件之間的依賴關(guān)系越發(fā)錯(cuò)綜復(fù)雜，維護(hù)難度也越來越高。這樣的困境驅(qū)使著前端工程師們不斷探索新的開發(fā)模式，從后端、app的開發(fā)模式中我們獲得靈感，為什么不能引入“模塊”的概念讓js文件之間可以相互引用呢？模塊1要使用模塊2的功能，只需要在該模塊1中明確引用模塊2就行了，而不用擔(dān)心它們的排列順序。基于這種理念，CommonJS和 AMD規(guī)范被創(chuàng)造了出來，然后有了require.js、system.js這樣的前端模塊加載工具和node的模塊系統(tǒng)，直到現(xiàn)在流行的es6 module。

模塊的引入解決了文件之間依賴引用的問題，而打包則解決了文件過多的問題。當(dāng)項(xiàng)目規(guī)模增大，模塊的數(shù)量數(shù)以千計(jì)，瀏覽器如果要加載如此多的文件，頁面加載的速度勢(shì)必會(huì)受影響，而bundler可以把多個(gè)關(guān)聯(lián)的文件打包到一起從而大量減少文件的數(shù)量提高網(wǎng)頁加載性能。提供模塊化的開發(fā)方式和編譯打包功能就是webpack的核心，其他很多功能都圍繞它們展開。

核心概念

Module（模塊）

對(duì)于webpack，模塊不僅僅是javascript模塊，它包括了任何類型的源文件，不管是圖片、字體、json文件都是一個(gè)個(gè)模塊。Webpack支持以下的方式引用模塊：

•  ES2015 import 方法
•  CommonJs require() 方法
•  AMD define 和 require 語法
•  css/sass/less文件中的 @import 語法
•  url(...) 和　<img src=...> 中的圖片路徑

Dependency Graph（依賴關(guān)系圖）

所謂的依賴關(guān)系圖是webpack根據(jù)每個(gè)模塊之間的依賴關(guān)系遞歸生成的一張內(nèi)部邏輯圖，有了這張依賴關(guān)系圖，webpack就能按圖索驥把所有需要模塊打包成一個(gè)bundle文件了。

Entry（入口）

繪制依賴關(guān)系圖的起始文件被稱為entry。默認(rèn)的entry為 ./src/index.js，或者我們可以在配置文件中配置。entry可以為一個(gè)也可以為多個(gè)。

單個(gè)entry： 

module.exports = {  
  entry: './src/index.js'  
} 

或者 

module.exports = {  
  entry: {  
    main: './src/index.js'  
  }  
}; 

多個(gè)entry，一個(gè)chunk

我們也可以指定多個(gè)獨(dú)立的文件為entry，但將它們打包到一個(gè)chunk中，此種方法被稱為 multi-main entry，我們需要傳入文件路徑的數(shù)組： 

module.exports = {  
  entry: ['./src/index.js', './src/index2.js', './src/index3.js']  
} 

但是改種方法的靈活性和擴(kuò)展性有限，因此并不推薦使用。

多個(gè)entry，多個(gè)chunk

如果有多個(gè)entry，并且每個(gè)entry生成對(duì)應(yīng)的chunk，我們需要傳入object： 

module.exports = {  
  entry: {  
    app: './src/app.js',  
    admin: './src/admin.js'  
  }  
}; 

這種寫法有***的靈活性和擴(kuò)展性，支持和其他的局部配置（partial configuration）進(jìn)行合并。比如將開發(fā)環(huán)境和生產(chǎn)的配置分離，并抽離出公共的配置，在不同的環(huán)境下運(yùn)行時(shí)再將環(huán)境配置和公共配置進(jìn)行合并。

Output（出口）

有了入口，對(duì)應(yīng)的就有出口。顧名思義，出口就是webpack打包完成的輸出，output定義了輸出的路徑和文件名稱。Webpack的默認(rèn)的輸出路徑為 ./dist/main.js。同樣，我們可以在配置文件中配置output： 

module.exports = {  
  entry: './src/index.js',  
  output: {  
    path: __dirname + '/dist',  
    filename: 'bundle.js'  
  }  
}; 

多個(gè)entry的情況

當(dāng)有多個(gè)entry的時(shí)候，一個(gè)entry應(yīng)該對(duì)應(yīng)一個(gè)output，此時(shí)輸出的文件名需要使用替換符（substitutions）聲明以確保文件名的唯一性，例如使用入口模塊的名稱： 

module.exports = {  
  entry: {  
    app: './src/app.js',  
    search: './src/search.js'  
  },  
  output: {  
    filename: '[name].js',  
    path: __dirname + '/dist'  
  }  
} 

最終在 ./dist 路徑下面會(huì)生成 app.js和search.js兩個(gè)bundle文件。

Loader（加載器）

Webpack自身只支持加載js和json模塊，而webpack的理念是讓所有的文件都能被引用和加載并生成依賴關(guān)系圖，所以loader出場(chǎng)了。Loader能讓webpack能夠去處理其他類型的文件（比如圖片、字體文件、xml）。我們可以在配置文件中這樣定義一個(gè)loader：

webpack.config.js 

module.exports = {  
  module: {  
    rules: [  
      {   
        test: /\.txt$/,   
        use: 'raw-loader'   
      }  
    ]  
  }  
}; 

其中test定義了需要被轉(zhuǎn)化的文件或者文件類型，use定義了對(duì)該文件進(jìn)行轉(zhuǎn)化的loader的類型。該條配置相當(dāng)于告訴webpack當(dāng)遇到一個(gè)txt文件的引用時(shí)（使用require或者import進(jìn)行引用），先用raw-loader轉(zhuǎn)換一下該文件再把它打包進(jìn)bundle。

還有其他各種類型的loader，比如加載css文件的css-loader，加載圖片和字體文件的file-loader，加載html文件的html-loader，將***JS語法轉(zhuǎn)換成ES5的babel-loader等等。完整列表請(qǐng)參考 webpack loaders。

Plugin（插件）

Plugin和loader是兩個(gè)比較混淆和模糊的概念。Loader是用來轉(zhuǎn)換和加載特定類型的文件，所以loader的執(zhí)行層面是單個(gè)的源文件。而plugin可以實(shí)現(xiàn)的功能更強(qiáng)大，plugin可以監(jiān)聽webpack處理過程中的關(guān)鍵事件，深度集成進(jìn)webpack的編譯器，可以說plugin的執(zhí)行層面是整個(gè)構(gòu)建過程。Plugin系統(tǒng)是構(gòu)成webpack的主干，webpack自身也基于plugin系統(tǒng)搭建，webpack有豐富的內(nèi)置插件和外部插件，并且允許用戶自定義插件。官方列出的插件有 這些。

與loader不同，使用plugin我們必須先引用該插件，例如： 

const webpack = require('webpack'); // 用于引用webpack內(nèi)置插件  
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 外部插件  
module.exports = {  
  plugins: [  
    new webpack.HotModuleReplacementPlugin(),  
    new HtmlWebpackPlugin({template: './src/index.html'})  
  ]  
}; 

實(shí)踐

了解webpack的基本概念之后，我們通過實(shí)踐來加深理解。接下來，我們使用webpack搭建一個(gè)簡(jiǎn)易的react腳手架。

創(chuàng)建項(xiàng)目

首先創(chuàng)建react-webpack-starter項(xiàng)目并使用 npm init 初始化。

安裝依賴

安裝react 

npm i react react-dom 

安裝webpack相關(guān) 

npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin style-loader css-loader 

安裝webpack-cli后可以在命令行中執(zhí)行webpack命令；webpack-dev-server提供了簡(jiǎn)易的web服務(wù)器，并且在修改文件之后自動(dòng)執(zhí)行webpack的編譯操作并自動(dòng)刷新瀏覽器，省去了重復(fù)的手動(dòng)操作；html-webpack-plugin用于自動(dòng)生成index.html文件，并且在index.html中自動(dòng)添加對(duì)bundle文件的引用；style-loader和css-loader用于加載css文件。

安裝babel相關(guān)

由于react中使用了class, import這樣的es6的語法，為了提高網(wǎng)站的瀏覽器兼容性，我們需要用babel轉(zhuǎn)換一下。 

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader 

其中@babel/core是babel的核心模塊，包含了babel的核心功能；@babel/preset-env支持轉(zhuǎn)換ES6以及更新的js語法，并且可根據(jù)需要兼容的瀏覽器類型選擇加載的plugin從而精簡(jiǎn)生成的代碼；@babel/preset-react包含了babel轉(zhuǎn)換react所需要的plugin；babel-loader是webpack的babel加載器。

配置webpack

在項(xiàng)目根目錄下面新建webpack.config.js，內(nèi)容如下：

webpack.config.js 

const path = require('path');  
const HtmlWebpackPlugin = require('html-webpack-plugin');  
module.exports = {  
  entry: './src/index.js',  
  output: {  
    path: path.resolve(__dirname, 'dist'),  
    filename: 'bundle.js'  
  },  
  module: {  
    rules: [  
      {  
        test: /\.js$/,  
        exclude: /node_module/,  
        use: 'babel-loader'  
      },  
      {  
        test: /\.css$/,  
        use: ['style-loader', 'css-loader'] // 注意排列順序，執(zhí)行順序與排列順序相反  
      }  
    ]  
  },  
  plugins: [  
    new HtmlWebpackPlugin({  
      template: './src/index.html'  
    })  
  ]  
} 

其中HtmlWebpackPlugin使用自定義的模版來生成html 文件，模版的內(nèi)容如下：

./src/index.html 

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <meta http-equiv="X-UA-Compatible" content="ie=edge">  
  <title>My React App</title>  
</head>  
<body>  
  <div id="app"></div>  
</body>  
</html> 

配置babel

在項(xiàng)目根目錄下面新建.babelrc文件，配置我們安裝的兩個(gè)babel preset：

.babelrc 

{  
  "presets": [  
    "@babel/preset-env",  
    "@babel/preset-react"  
  ]  
} 

生成react應(yīng)用根節(jié)點(diǎn)

./src/index 

import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './components/App';  
ReactDOM.render(<App />, document.getElementById('app')); 

./src/component/App.js 

import React, { Component } from 'react';  
import './App.css';  
export default class App extends Component {  
  render() {  
    return (  
      <div>  
        my react webpack starter  
      </div>  
    )  
  }  
} 

./src/components/App.css 

body{  
  font-size: 60px;  
  font-weight: bolder;  
  color: red;  
  text-transform: uppercase;  
} 

配置 package.json

***，在package.json文件里面加上兩個(gè)scripts，用來運(yùn)行開發(fā)服務(wù)器和打包：

package.json 

"scripts": {  
  "start": "webpack-dev-server --mode development --open --hot",  
  "build": "webpack --mode production"  
} 

注意，我們啟用了webpack-dev-server的模塊熱更新功能（HMR），進(jìn)一步提高我們的開發(fā)效率。

到此一個(gè)最簡(jiǎn)版本的react腳手架就搭建完成了，我們運(yùn)行一下看看效果：

是不是沒有想象中的那么難呢？當(dāng)然webpack還有很多其他的功能和特性需要掌握，希望在參考本文之后大家進(jìn)一步的學(xué)習(xí)更加順利 。