1. 安裝Node.js
Webpack實際是用Node.js寫的，所以要先安裝Node.js環境。而且Node.js中集成了NPM包管理，我們在后面用到的很多模塊都需要使用NPM下載。
首先進入Node.js的官網，選擇對應系統下載安裝包，對於 windows 用戶，直接下載安裝包安裝即可，如果是 Macos 用戶，推薦使用 brew 進行安裝。Node.js有很多版本，包括穩定版和開發版，不同的項目需要的Node.js版本不同，推薦大家安裝 8.x 以上的版本。
2. 安裝Webpack
在我們需要創建項目的地方，新建一個文件夾，例如我再C盤下創建了一個名為myapp的文件夾（僅做演示，不建議放到系統盤下），那么myapp就是當前項目的根目錄。
在項目根目錄的地址欄直接輸入cmd然后按回車，就可以在此目錄中打開命令提示符，如下圖所示：
在命令行輸入命令，自定生成package.json文件，用於存放項目的描述信息，執行以下命令：
cnpm init -y
注：本教程中統一使用淘寶鏡像
cnpm命令安裝，使用該命令之前先檢查你的是否安裝了cnpm命令
輸入以下安裝命令，安裝webpack到本地項目：
cnpm install --save-dev webpack
#或者簡寫
cnpm i -D webpack
安裝成功后會在myapp項目下自動生成以下node_modules目錄和package.json文件：
然后在安裝webpack-cli工具，執行以下命令：
cnpm i -D webpack-cli
命令執行完成后，我們需要在package.json文件中配置打包的命令。在package.json文件的scripts屬性中添加下面配置項：
{
"scripts": {
"build": "webpack --mode production"
}
}
3. 安裝react和react-dom
命令提示符定位在當前項目根目錄下，依次執行以下命令：
安裝react：
cnpm i -S react
安裝react-dom：
cnpm i -S react-dom
安裝babel：
cnpm i babel-loader @babel/core @babel/preset-env -D
安裝babel preset-react：
cnpm i @babel/preset-react -D
4. 創建項目目錄結構與源文件
在項目創建webpack.config.js配置文件，並在配置文件中添加對JSX語法的Babel編譯支持，文件內容如下：
module.exports = {
resolve: {
extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/, // jsx/js文件的正則
exclude: /node_modules/, // 排除 node_modules 文件夾
use: {
// loader 是 babel
loader: 'babel-loader',
options: {
// babel 轉義的配置選項
babelrc: false,
presets: [
// 添加 preset-react
require.resolve('@babel/preset-react'),
[require.resolve('@babel/preset-env'), {modules: false}]
],
cacheDirectory: true
}
}
}
]
}
};
在項目根目錄分別創建src和public文件夾，此時項目的結構就成了下面圖片中的效果：
src 目錄：用於存放項目的源碼文件，例如 .js 文件或 .jsx 文件；
public 目錄：用於存放項目的靜態文件，例如.html文件或圖片等
在public目錄下創建：index.html 文件 （項目的默認首頁）；
在src目錄下創建：index.js、App.js 文件（編寫源代碼）；
public/index.html文件是項目默認首頁，內容如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
src/App.js文件是自定義組件，內容如下：
import React from 'react';
function App () {
return (
<div>
React from Webpack
</div>
);
};
export default App;
src/index.js文件是項目的入口文件，內容如下：
import React from 'react';
import ReactDom from 'react-dom';
import App from './App';
ReactDom.render(<App />,document.getElementById('root'));
到此，我們項目的目錄結構就搭建完成了。
然后就是對我們創建的這些文件，做一些配置。先打開webpack.config.js文件，配置webpack的入口，添加以下內容：
module.exports = {
entry: './src/index.js', //添加入口配置項
// ...
};
下面在來安裝html-webpack-plugin這個插件，執行以下命令：
cnpm i html-webpack-plugin -D
該插件主要有兩個作用：
- 為html文件中引入的外部資源如script、link動態添加每次compile后的hash，防止引用緩存的外部文件問題；
- 可以生成創建html入口文件，比如單頁面可以生成一個html文件入口，配置N個html-webpack-plugin可以生成N個頁面入口。
安裝好后，再修改webpack.config.js配置，引入在webpack中使用插件：
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
plugins: [
new HtmlWebPackPlugin({
template: 'public/index.html',
filename: 'index.html',
inject: true
})
]
};
上面的操作都完成之后，可以執行打包命令：
npm run build
如果在命令行中出現下面的內容，證明打包成功了：
成功打包后，項目的根目錄會生成一個dist的文件夾，文件夾中存放的是打包好的 .html 和 .js 文件。
5. 配置本地服務器
我們可以基於Node.js的Express搭建一個本地服務器，通過Express的中間件 webpack-dev-middleware 來實現與 Webpack的交互。實現本地服務需要以下三步：
第一步：安裝webpack-dev-server模塊
安裝命令：
cnpm i webpack-dev-server -D
第二步：配置服務項
安裝成功后，需要在webpack.config.js文件中配置服務器的相關設置：
const HtmlWebPackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
mode: 'development',
devtool: 'cheap-module-source-map',
devServer: {
contentBase: path.join(__dirname, './public/'),
publicPath: '/',
host: '127.0.0.1',
port: 3000,
stats: {
colors: true
}
},
//......
};
第三步：設置啟動命令
在package.json文件的scripts屬性中，添加start啟動項：
{
"scripts": {
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development --open"
}
}
完成上面步驟后，在命令行里執行 npm start 就可以啟動服務器了！
服務器啟動后，會自動打開瀏覽器，並訪問我們配置好的地址：
當源碼發生修改時，可以自動實現頁面的刷新。
到此，React環境就搭建成功了，我們可以在這個環境基礎上開發項目了。
總結
由於Webpack主要是用於項目的構建和打包，甚至有的同學在工作中根本就接觸不到Webpack，或者是項目中只配置一次Webpack，后面就不再用了。對於這些同學來說，希望這篇教程能夠給你帶來一些新的知識儲備，在以后用到的時候，能夠有操作的思路和方法。
也有同學會說，現在都是使用腳手架工具，直接用create-react-app搭建環境就好了，既方便又省事。首先，這個觀點是非常正確的，我也推薦大家使用腳手架工具搭建環境，但是作為一個前端工程師來說，我們只有了解了環境的運行原理，才能更好的駕馭框架，代碼出現錯誤時，不至於不知所措。
Webpack不僅是學習前端框架的前提，也是同學們將來面試必問、筆試必考、工作必用的內容，隨着前端工程化的發展，Webpack正在變得越來越重要，尤其對於大型的一線互聯網公司，會不會Webpack甚至能直接決定你是否能被錄用。所以學好Webpack是步入前端開發工作的第一步。