webpack入門指南（基於webpack v4.41.2）
2019年12月5日初稿，目前webpack已經更新到v4.41.2，本文正是基於該版本，在windows8.1作業系統下進行的demo編譯，適用於想入門webpack的前端開發人員。
webpack官方使用指南（參考1）：https://www.webpackjs.com/guides/getting-started/
本文參考（參考2）：https://segmentfault.com/a/1190000006178770?utm_source=tag-newest#comment-area
一、使用webpack之前的準備工作
在開始之前，請確保安裝了 node.js的最新版本。這裡給大家推薦https://www.cnblogs.com/zhouyu2017/p/6485265.html，大家可以通過這篇文章來安裝node.js並進行環境變數配置。
二、開始使用webpack
1、建立練習資料夾，本人將該資料夾命名為webpackTest(根目錄)，並通過CMD進入該資料夾下
2、建立package.json檔案及安裝webpack
a、在根目錄下建立package.json檔案，這是一個標準的npm說明檔案，裡面蘊含了豐富的資訊，包括當前專案的依賴模組，自定義的指令碼任務等等。在終端中使用npm init -y命令可以自動建立這個package.json檔案.
命令：npm init -y
執行結果：
目錄結構：
程式碼內容：
//package.json
{
"name": "webpackTest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}b、建立完成package.json之後安裝webpack，按照官方推薦使用區域性（本地）安裝，這裡安裝最新版本（此時最新版本為v4.41.2，當你看到這篇文章時，其版本可能又已經更新，你可以通過npm install --save-dev [email protected]來下載該版本），其中webpack-cli工具用於在命令列中執行 webpack。
命令：npm install webpack webpack-cli --save-dev
執行結果：
目錄結構：
3、初始檔案設定
在根目錄下建立兩個資料夾src、dist，src資料夾用來存放原始資料和我們將寫的JavaScript模組，dist資料夾用來存放之後供瀏覽器讀取的檔案（包括使用webpack打包生成的js檔案以及一個index.html檔案）。接下來，再建立3個檔案：
index.html--放入dist資料夾中
style.css--放入src資料夾中
test.js--放入main資料夾中
目錄結構：
在index.html檔案中寫入最基礎的html程式碼，它在這裡目的在於引入打包後的js檔案（這裡我們先把之後打包後的js檔案命名為bundle.js，之後我們還會詳細講述），程式碼如下：
<!-- 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>Webpack Sample Project</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
在test.js中定義一個返回包含“Hello WebPack!”文字的html元素的函式,並依據CommonJS規範匯出這個函式為一個模組，程式碼如下：
// test.js
module.exports = function() {
var testCon = document.createElement("div");
testCon.textContent = "Hello WebPack!";
return testCon;
};
main.js檔案中我們寫入下述程式碼，用以把testCon模組返回的節點插入頁面，程式碼如下：
//main.js
const testContent = require("./test.js");
document.querySelector("#root").appendChild(testContent());
4、正式使用webpack
在終端根目錄下輸入以下命令：
npx webpack src/main.js --output dist/bundle.js
執行結果：
可以看出webpack同時編譯了main.js和test.js，並且注意下面的目錄結構，dist資料夾中已經自動生成了編譯之後的輸出檔案bundle.js。
目錄結構：
頁面結果：
此時，我們已經通過webpack打包了一個檔案。
5、通過配置檔案使用webpack
在 webpack 4 中，可以無須任何配置使用，然而大多數專案會需要很複雜的設定，這就是為什麼 webpack 仍然要支援 配置檔案。這比在終端中手動輸入大量命令要高效的多，所以我們需要建立一個取代以上使用 CLI 選項方式的配置檔案，該配置檔案其實也是一個簡單的JavaScript模組，我們可以把所有的與打包相關的資訊放在裡面。
繼續上面的例子來說明如何寫這個配置檔案，在當前練習資料夾的根目錄下新建一個名為webpack.config.js的檔案，我們在其中寫入如下所示的簡單配置程式碼，目前的配置主要涉及到的內容是入口檔案路徑和打包後文件的存放路徑，內容具體如下：
// webpack.config.js
module.exports = {
entry: __dirname + "/src/main.js",//唯一入口檔案
output: {
path: __dirname + "/dist",//打包後的檔案存放的地方
filename: "bundle.js"//打包後輸出檔案的檔名
}
}
注：“__dirname”是node.js中的一個全域性變數，它指向當前執行指令碼所在的目錄。
有了這個配置之後，再打包檔案，只需在終端裡執行npx webpack --config webpack.config.js命令就可以了，這條命令會自動引用webpack.config.js檔案中的配置選項。
命令：npx webpack --config webpack.config.js
執行結果：
6、更便捷的執行打包任務：NPM指令碼（NPM Scripts）
考慮到用 CLI 這種方式來執行本地的 webpack 不是特別方便，我們可以設定一個快捷方式。在 package.json 新增一個 NPM指令碼（NPM Scripts）"build":"webpack"或者"start":"webpack"，這裡我們使用前者，程式碼如下：
{
"name": "webpackTest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10"
}
}
npm的start命令是一個特殊的指令碼名稱，其特殊性表現在，在命令列中使用npm start就可以執行其對於的命令，如果對應的此指令碼名稱不是start，想要在命令列中執行時，需要這樣用npm run {script name}如npm run build，我們在命令列中輸入npm run build試試，輸出結果如下：
現在只需要使用npm run build就可以打包檔案了。
webpack的功能不止於此，我們還可以通過對配置檔案的配置方式指定 loader 規則(loader rules)、外掛(plugins)、解析選項(resolve options)，以及許多其他增強功能。
7、生成source maps(使除錯更容易)
開發總是離不開除錯，方便的除錯能極大的提高開發效率，不過有時候通過打包後的檔案，你是不容易找到出錯了的地方，對應的你寫的程式碼的位置的，source maps就是來幫我們解決這個問題的。
通過簡單的配置，webpack就可以在打包時為我們生成的source maps，這為我們提供了一種對應編譯檔案和原始檔的方法，使得編譯後的程式碼可讀性更高，也更容易除錯。在webpack的配置檔案中配置source maps，需要配置devtool，它有以下四種不同的配置選項（本文的參考2已經介紹過，這裡不再贅述），在小到中型專案開發環境中我們對webpack.config.js檔案這樣配置：
// webpack.config.js
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/src/main.js",//唯一入口檔案
output: {
path: __dirname + "/dist",//打包後的檔案存放的地方
filename: "bundle.js"//打包後輸出檔案的檔名
}
}
8、使用webpack構建本地伺服器
我們可以基於node.js構建一個webpack提供的一個可選的本地開發伺服器，這樣瀏覽器監聽程式碼的修改，並自動重新整理顯示修改後的結果。該伺服器是一個單獨的元件，在webpack中進行配置之前需要單獨安裝它作為專案依賴：
命令：npm install --save-dev webpack-dev-server
執行結果：
更改配置檔案webpack.config.js：
// webpack.config.js
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/src/main.js",//唯一入口檔案
output: {
path: __dirname + "/dist",//打包後的檔案存放的地方
filename: "bundle.js"//打包後輸出檔案的檔名
},
devServer: {
contentBase: "./dist",//設定本地伺服器所載入的頁面所在的目錄
port:"8082",//設定預設監聽埠為8082，如果省略，預設為”8080“
historyApiFallback: true,//不跳轉，在開發單頁應用時非常有用，它依賴於HTML5 history API，如果設定為true，所有的跳轉將指向index.html
inline: true//是否實時重新整理
}
}
在package.json中的scripts物件中新增如下命令"server": "webpack-dev-server --open"，用以開啟本地伺服器：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"build": "webpack",
"server": "webpack-dev-server --open"
}
在終端中輸入npm run server 即可在本地的8082埠檢視結果：
命令：npm run server
執行結果：
頁面結果：
9、loader
loader讓 webpack 能夠去處理那些非 JavaScript 檔案（webpack 自身只理解 JavaScript）。loader 可以將所有型別的檔案轉換為 webpack 能夠處理的有效模組，然後你就可以利用 webpack 的打包能力，對它們進行處理。
本質上，webpack loader 將所有型別的檔案，轉換為應用程式的依賴圖（和最終的 bundle）可以直接引用的模組。比如說分析轉換scss為css，或者把下一代的JS檔案（ES6，ES7)轉換為現代瀏覽器相容的JS檔案，對React的開發而言，合適的Loaders可以把React的中用到的JSX檔案轉換為JS檔案。
注意：loader 能夠import匯入任何型別的模組（例如 .css 檔案），這是 webpack 特有的功能，其他打包程式或任務執行器的可能並不支援。這種語言擴充套件是有很必要的，因為這可以使開發人員創建出更準確的依賴關係圖。
Loaders需要單獨安裝並且需要在webpack.config.js中的modules關鍵字下進行配置，Loaders的配置包括以下幾方面：
- test：一個用以匹配loaders所處理檔案的拓展名的正則表示式（必須）
- loader：loader的名稱（必須）
- include/exclude:手動新增必須處理的檔案（資料夾）或遮蔽不需要處理的檔案（資料夾）（可選）
- query：為loaders提供額外的設定選項（可選）
在配置loader之前，我們把test.js裡的問候訊息放在一個單獨的JSON檔案裡,並通過合適的配置使test.js可以讀取該JSON檔案的值，各檔案修改後的程式碼如下：
在src資料夾中建立帶有問候資訊的JSON檔案，命名為config.json:
{
"testText":"Hello WebPack!"
}
更新後的test.js：
//test.js
var config = require('./config.json');
module.exports = function() {
var testCon = document.createElement("div");
testCon.textContent = config.testText;
return testCon;
};
10、Babel的安裝與配置
Babel其實是一個編譯JavaScript的平臺，它可以編譯程式碼幫你達到以下目的：
- 讓你能使用最新的JavaScript程式碼（ES6，ES7...），而不用管新標準是否被當前使用的瀏覽器完全支援
- 讓你能使用基於JavaScript進行了拓展的語言，比如React的JSX
- ...
Babel其實是幾個模組化的包，其核心功能位於稱為babel-core的npm包中，webpack可以把其不同的包整合在一起使用，對於每一個你需要的功能或拓展，你都需要安裝單獨的包（用得最多的是解析Es6的babel-preset-es2015包和解析JSX的babel-preset-react包）。
我們先來一次性（npm可以一次性安裝多個依賴模組，模組之間用空格隔開）安裝這些依賴包：
命令：
npm install --save-dev babel-core [email protected] babel-preset-es2015 babel-preset-react
注意：預設babel-loader最新8.0+版本的話會產生衝突，這裡採用7.1.5版本
執行結果（這是修改babel-loder版本之前的執行結果）：
在webpack.config.js中配置Babel的方法如下:
// webpack.config.js
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/src/main.js",//唯一入口檔案
output: {
path: __dirname + "/dist",//打包後的檔案存放的地方
filename: "bundle.js"//打包後輸出檔案的檔名
},
devServer: {
contentBase: "./dist",//設定本地伺服器所載入的頁面所在的目錄
port:"8082",//設定預設監聽埠，如果省略，預設為”8080“
historyApiFallback: true,//不跳轉，在開發單頁應用時非常有用，它依賴於HTML5 history API，如果設定為true，所有的跳轉將指向index.html
inline: true//是否實時重新整理
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"es2015", "react"
]
}
},
exclude: /node_modules/
}
]
}
}
現在你的webpack的配置已經允許你使用ES6以及JSX的語法了，繼續用上面的例子進行測試，不過這次我們會使用React，記得先安裝 React 和 React-DOM：
命令：npm install --save react react-dom
執行結果：
接下來我們使用ES6的語法，更新test.js並返回一個React元件:
//test.js
import React, {Component} from 'react'
import config from './config.json';
class TestCon extends Component{
render() {
return (<div>{config.testText}</div>);
}
}
export default TestCon;
修改main.js如下，使用ES6的模組定義和渲染Greeter模組:
// main.js
import React from 'react';
import {render} from 'react-dom';
import TestCon from './test';
render(<TestCon />, document.getElementById('root'));
重新使用npm run build打包:
打包成功，瀏覽器和之前顯示的內容一樣：
11、一切皆模組，資源管理
Webpack有一個不可不說的優點，它把所有的檔案都都當做模組處理，JavaScript程式碼，CSS和fonts以及圖片等等通過合適的loader都可以被處理。接下來我們將以css為例進行操作。
webpack提供兩個工具處理樣式表，css-loader和 style-loader，二者處理的任務不同，css-loader使你能夠使用類似@import和url(...)的方法實現require()的功能，style-loader將所有的計算後的樣式加入頁面中，二者組合在一起使你能夠把樣式表嵌入webpack打包後的JS檔案中。繼續上面的例子：
命令：npm install --save-dev style-loader css-loader
執行結果：
在webpack.config.js的module中新增如下程式碼：
// webpack.config.js
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/src/main.js",//唯一入口檔案
output: {
path: __dirname + "/dist",//打包後的檔案存放的地方
filename: "bundle.js"//打包後輸出檔案的檔名
},
devServer: {
contentBase: "./dist",//設定本地伺服器所載入的頁面所在的目錄
port:"8082",//設定預設監聽埠，如果省略，預設為”8080“
historyApiFallback: true,//不跳轉，在開發單頁應用時非常有用，它依賴於HTML5 history API，如果設定為true，所有的跳轉將指向index.html
inline: true//是否實時重新整理
},
module: {
rules: [{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"es2015", "react"
]
}
},
exclude: /node_modules/
},{
test: /\.css$/,
use: [{
loader: "style-loader"
},{
loader: "css-loader"
}]
}]
}
}
請注意這裡對同一個檔案引入多個loader的方法。
接下來，在src資料夾裡建立一個名字為"main.css"的檔案，對一些元素設定樣式：
/* main.css */
*{
padding: 0px;
margin: 0px;
font-size: 16px;
font-family:'幼圓', 'Times New Roman', Times, serif;
color: #333;
list-style: none;
}
html,body{
width: 100%;
height: 100%;
}
我們這裡例子中用到的webpack只有單一的入口，其它的模組需要通過import，require，url等與入口檔案建立其關聯，為了讓webpack能找到”main.css“檔案，我們把它匯入”main.js “中，如下：
// main.js
import React from 'react';
import {render} from 'react-dom';
import TestCon from './test';
import './main.css';
render(<TestCon />, document.getElementById('root'));
在終端該專案根目錄下輸入命令npm run build：
執行結果：
頁面結果：
可以看到，樣式已經渲染成功。接下來，咱們繼續看一個更加真實的css模組實踐。
Css module
在過去的一些年裡，JavaScript通過一些新的語言特性，更好的工具以及更好的實踐方法（比如說模組化）發展得非常迅速。模組使得開發者把複雜的程式碼轉化為小的，乾淨的，依賴宣告明確的單元，配合優化工具，依賴管理和載入管理可以自動完成。不過，前端的另外一部分，CSS發展就相對慢一些，大多的樣式表卻依舊巨大且充滿了全域性類名，維護和修改都非常困難。
被稱為Css module的技術意在把JS的模組化思想帶入CSS中來，通過CSS模組，所有的類名，動畫名預設都只作用於當前模組。Webpack對CSS模組化提供了非常好的支援，只需要在CSS loader中進行簡單配置即可，然後就可以直接把CSS的類名傳遞到元件的程式碼中，這樣做有效避免了全域性汙染。具體的程式碼如下：
// webpack.config.js
module.exports = {
······
module: {
rules: [{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"es2015", "react"
]
}
},
exclude: /node_modules/
},{
test: /\.css$/,
use: [{
loader: "style-loader"
},{
loader: "css-loader",
options: {
modules: true// 指定啟用css modules
}
}]
}]
}
}
我們在src資料夾下建立一個test.css檔案來進行一下測試:
/* test.css */
.root {
background-color: red;
padding: 10px;
border: 1px solid #999;
}
匯入.root到test.js中：
//test.js
import React, {Component} from 'react'
import config from './config.json';
import styles from './test.css';//匯入
class TestCon extends Component{
render() {
return (<div className={styles.root}>{config.testText}</div>);//使用cssModule新增類名的方法
}
}
export default TestCon;
這樣的話，就可以放心使用了，相同的類名也不會造成不同元件之間的汙染。
命令：npm run build
執行結果：
頁面結果：
CSS前處理器
Sass和Less之類的前處理器是對原生CSS的拓展，它們允許你使用類似於variables，nesting，mixins，inheritance等不存在於CSS中的特性來寫CSS，CSS前處理器可以這些特殊型別的語句轉化為瀏覽器可識別的CSS語句，以下是常用的CSS 處理loaders：
- Less Loader
- Sass Loader
- Stylus Loader
不過其實也存在一個CSS的處理平臺-Post-Css，它可以幫助你的CSS實現更多的功能。下面我們舉例來說如何使用PostCSS，我們使用PostCSS來為CSS程式碼自動新增適應不同瀏覽器的CSS字首。
首先安裝postcss-loader 和autoprefixer （自動新增字首的外掛）
命令：npm install --save-dev postcss-loader autoprefixer
執行結果：
接下來，接下來，在webpack配置檔案webpack.config.js中新增postcss-loader，在根目錄新建postcss.config.js：
// webpack.config.js
module.exports = {
······
module: {
rules: [{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"es2015", "react"
]
}
},
exclude: /node_modules/
},{
test: /\.css$/,
use: [{
loader: "style-loader"
},{
loader: "css-loader",
options: {
modules: true// 指定啟用css modules
}
},{
loader: "postcss-loader"
}]
}]
}
}
// postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
}
目錄結構：
執行命令：npm run build
執行結果：
至此，本文已經談論了處理JS的Babel和處理CSS的PostCSS的基本用法，它們其實也是兩個單獨的平臺，配合webpack可以很好的發揮它們的作用。接下來介紹Webpack中另一個非常重要的功能-Plugins。
12、外掛（Plugins）
外掛（Plugins）是用來拓展Webpack功能的，它們會在整個構建過程中生效，執行相關的任務。Loaders和Plugins常常被弄混，但是他們其實是完全不同的東西，可以這麼來說，loaders是在打包構建過程中用來處理原始檔的（JSX，Scss，Less..），一次處理一個，外掛並不直接操作單個檔案，它直接對整個構建過程其作用。Webpack有很多內建外掛，同時也有很多第三方外掛，可以讓我們完成更加豐富的功能。
使用外掛的方法
要使用某個外掛，我們需要通過npm安裝它，然後要做的就是在webpack的配置檔案webpack.config.js中的plugins關鍵字部分新增該外掛的一個例項（plugins是一個數組）繼續上面的例子，我們添加了一個給打包後代碼新增版權宣告的外掛。
// webpack.config.js
const webpack = require('webpack');
module.exports = {
······
module: {
······
},
plugins: [
new webpack.BannerPlugin('版權所有，翻版必究')
]
}
通過這個外掛，打包後的JS檔案顯示如下：
這就是webpack外掛的基礎用法了，下面給大家推薦幾個常用的外掛。
HtmlWebpackPlugin
這個外掛的作用是依據一個簡單的index.html模板，生成一個自動引用你打包後的JS檔案的新index.html。這在每次生成的js檔名稱不同時非常有用（比如添加了hash值）。
安裝命令：npm install --save-dev html-webpack-plugin
執行結果：
這個外掛自動完成了我們之前手動做的一些事情，在正式使用之前需要對一直以來的專案結構做一些更改：
- 移除dist資料夾，利用此外掛，index.html檔案會自動生成，此外CSS已經通過前面的操作打包到JS中了
- 在src目錄下，建立一個index.tmpl.html一個index.tmpl.html檔案模板，這個模板包含title等必須元素，在編譯過程中，外掛會依據此模板生成最終的html頁面，會自動新增所依賴的 css, js，favicon等檔案，index.tmpl.html中的模板原始碼如下：
<!-- index.tmpl.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>Webpack Sample Project</title> </head> <body> <div id="root"></div> </body> </html> - 更新webpack的配置檔案，新建一個build資料夾用來存放最終的輸出檔案：
// webpack.config.js const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { devtool: 'eval-source-map', entry: __dirname + "/src/main.js",//唯一入口檔案 output: { path: __dirname + "/build",//打包後的檔案存放的地方 filename: "bundle.js"//打包後輸出檔案的檔名 }, devServer: { contentBase: "./dist",//設定本地伺服器所載入的頁面所在的目錄 port:"8082",//設定預設監聽埠，如果省略，預設為”8080“ historyApiFallback: true,//不跳轉，在開發單頁應用時非常有用，它依賴於HTML5 history API，如果設定為true，所有的跳轉將指向index.html inline: true//是否實時重新整理 }, module: { rules: [{ test: /(\.jsx|\.js)$/, use: { loader: "babel-loader", options: { presets: [ "es2015", "react" ] } }, exclude: /node_modules/ },{ test: /\.css$/, use: [{ loader: "style-loader" },{ loader: "css-loader", options: { modules: true// 指定啟用css modules } },{ loader: "postcss-loader" }] }] }, plugins: [ new webpack.BannerPlugin('版權所有，翻版必究'), new HtmlWebpackPlugin({ template: __dirname + "/src/index.tmpl.html"//new 一個這個外掛的例項，並傳入相關的引數 }) ] }再次執行npm run build你會發現，build資料夾下面生成了bundle.js和index.html。目錄結構如下：
Hot Module Replacement
Hot Module Replacement（HMR）也是webpack裡很有用的一個外掛，它允許你在修改元件程式碼後，自動重新整理實時預覽修改後的效果。在webpack中實現HMR也很簡單，只需要做兩項配置：
- 在webpack配置檔案中新增HMR外掛
- 在Webpack Dev Server中新增“hot”引數
不過配置完這些後，JS模組其實還是不能自動熱載入的，還需要在你的JS模組中執行一個Webpack提供的API才能實現熱載入，雖然這個API不難使用，但是如果是React模組，使用我們已經熟悉的Babel可以更方便的實現功能熱載入。
整理下我們的思路，具體實現方法如下：
- babel和webpack是獨立的工具
- 二者可以一起工作
- 二者都可以通過外掛拓展功能
- HMR是一個webpack外掛，它讓你能瀏覽器中實時觀察模組修改後的效果，但是如果你想讓它工作，需要對模組進行額外的配額
- Babel有一個叫做react-transform-hrm的外掛，可以在不對React模組進行額外的配置的前提下讓HMR正常工作
還是繼續上例來實際看看如何配置:
// webpack.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/src/main.js",//唯一入口檔案
output: {
path: __dirname + "/build",//打包後的檔案存放的地方
filename: "bundle.js"//打包後輸出檔案的檔名
},
devServer: {
contentBase: "./dist",//設定本地伺服器所載入的頁面所在的目錄
port:"8082",//設定預設監聽埠，如果省略，預設為”8080“
historyApiFallback: true,//不跳轉，在開發單頁應用時非常有用，它依賴於HTML5 history API，如果設定為true，所有的跳轉將指向index.html
inline: true,//是否實時重新整理
hot: true,
},
module: {
rules: [{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
},{
test: /\.css$/,
use: [{
loader: "style-loader"
},{
loader: "css-loader",
options: {
modules: true// 指定啟用css modules
}
},{
loader: "postcss-loader"
}]
}]
},
plugins: [
new webpack.BannerPlugin('版權所有，翻版必究'),
new HtmlWebpackPlugin({
template: __dirname + "/src/index.tmpl.html"//new 一個這個外掛的例項，並傳入相關的引數
}),
new webpack.HotModuleReplacementPlugin()//熱載入外掛
]
}
安裝react-transform-hrm:
命令：npm install --save-dev babel-plugin-react-transform react-transform-hmr
在根目錄下新建.babelrc，配置Babel：
//.babelrc
{
"presets": [
"es2015", "react"
],
"env": {
"development": {
"plugins": [["react-transform", {
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}]
}]]
}
}
}
現在當你使用React時，可以熱載入模組了,每次儲存就能在瀏覽器上看到更新內容。
13、產品階段的構建
目前為止，我們已經使用webpack構建了一個完整的開發環境。但是在產品階段，可能還需要對打包的檔案進行額外的處理，比如說優化，壓縮，快取以及分離CSS和JS。
對於複雜的專案來說，需要複雜的配置，這時候分解配置檔案為多個小的檔案可以使得事情井井有條，以上面的例子來說，我們建立一個webpack.production.config.js的檔案，在裡面加上基本的配置,它和原始的webpack.config.js很像，如下：
// webpack.production.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devtool: 'null', //注意修改了這裡，這能大大壓縮我們的打包程式碼
entry: __dirname + "/src/main.js",//唯一入口檔案
output: {
path: __dirname + "/build",//打包後的檔案存放的地方
filename: "bundle.js"//打包後輸出檔案的檔名
},
devServer: {
contentBase: "./dist",//設定本地伺服器所載入的頁面所在的目錄
port:"8082",//設定預設監聽埠，如果省略，預設為”8080“
historyApiFallback: true,//不跳轉，在開發單頁應用時非常有用，它依賴於HTML5 history API，如果設定為true，所有的跳轉將指向index.html
inline: true,//是否實時重新整理
hot: true,
},
module: {
rules: [{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
}, {
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader: "css-loader",
options: {
modules: true
}
}, {
loader: "postcss-loader"
}],
})
}]
},
plugins: [
new webpack.BannerPlugin('版權所有，翻版必究'),
new HtmlWebpackPlugin({
template: __dirname + "/src/index.tmpl.html"//new 一個這個外掛的例項，並傳入相關的引數
}),
new webpack.HotModuleReplacementPlugin() //熱載入外掛
],
};
package.json進行如下修改：
{
"name": "webpackTest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"build": "set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress",
"server": "webpack-dev-server --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^9.7.3",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-react-transform": "^3.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^3.3.0",
"html-webpack-plugin": "^3.2.0",
"postcss-loader": "^3.0.0",
"react-transform-hmr": "^1.0.4",
"style-loader": "^1.0.1",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
},
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0"
}
}
接下先不要進行打包，上述的webpack.production.config.js中的樣式模組中使用了ExtractTextPlugin，所以我們需要對外掛進行優化。
優化外掛
webpack提供了一些在釋出階段非常有用的優化外掛，它們大多來自於webpack社群，可以通過npm安裝，通過以下外掛可以完成產品釋出階段所需的功能：
- OccurenceOrderPlugin：為元件OccurenceOrderPlugin分配ID，通過這個外掛webpack可以分析和優先考慮使用最多的模組，併為它們分配最小的ID
- UglifyJsPlugin：壓縮JS程式碼
- ExtractTextPlugin：分離CSS和JS檔案
我們繼續用例子來看看如何新增它們，OccurenceOrder 是內建外掛，你需要做的只是安裝其它非內建外掛：
命令：npm install --save-dev [email protected] uglifyjs-webpack-plugin
在配置檔案webpack.production.config.js的plugins後引用它們:
// webpack.production.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
devtool: 'null', //注意修改了這裡，這能大大壓縮我們的打包程式碼
entry: __dirname + "/src/main.js",//唯一入口檔案
output: {
path: __dirname + "/build",//打包後的檔案存放的地方
filename: "bundle.js"//打包後輸出檔案的檔名
},
devServer: {
contentBase: "./dist",//設定本地伺服器所載入的頁面所在的目錄
port:"8082",//設定預設監聽埠，如果省略，預設為”8080“
historyApiFallback: true,//不跳轉，在開發單頁應用時非常有用，它依賴於HTML5 history API，如果設定為true，所有的跳轉將指向index.html
inline: true,//是否實時重新整理
hot: true,
},
module: {
rules: [{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
}, {
test: /\.css$/,
use: [{
loader: "style-loader"
},{
loader: "css-loader",
options: {
modules: true// 指定啟用css modules
}
},{
loader: "postcss-loader"
}]
}]
},
plugins: [
new webpack.BannerPlugin('版權所有，翻版必究'),
new HtmlWebpackPlugin({
template: __dirname + "/src/index.tmpl.html"//new 一個這個外掛的例項，並傳入相關的引數
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new ExtractTextPlugin("style.css")
],
optimization: {//壓縮js
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
compress: false
}
})
]
}
};
此時執行npm run build可以看見程式碼是被壓縮後的：
執行結果：
壓縮後的bundle.js:
快取
快取無處不在，使用快取的最好方法是保證你的檔名和檔案內容是匹配的（內容改變，名稱相應改變）。webpack可以把一個雜湊值新增到打包的檔名中，使用方法如下,新增特殊的字串混合體（[name], [id] and [hash]）到輸出檔名前：
// webpack.production.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
devtool: 'null', //注意修改了這裡，這能大大壓縮我們的打包程式碼
entry: __dirname + "/src/main.js",//唯一入口檔案
output: {
path: __dirname + "/build",//打包後的檔案存放的地方
filename: "bundle-[hash].js"//打包後輸出檔案的檔名
},
······
};
打包：npm run build
執行結果：
目錄結構：
去除build檔案中的殘餘檔案
添加了hash之後，會導致改變檔案內容後重新打包時，檔名不同而內容越來越多，因此這裡介紹另外一個很好用的外掛clean-webpack-plugin。
安裝命令：npm install --save-dev clean-webpack-plugin
執行結果：
在配置檔案的webpack.production.config.js中做相應配置：
// webpack.production.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
······
plugins: [
new webpack.BannerPlugin('版權所有，翻版必究'),
new HtmlWebpackPlugin({
template: __dirname + "/src/index.tmpl.html"//new 一個這個外掛的例項，並傳入相關的引數
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new ExtractTextPlugin("style.css"),
new CleanWebpackPlugin()
],
······
};
三、總結
本文主要是參考網友zhangwang 的參考2這篇文章的，有些內容該參考文章中寫的比我的詳細一些，我相當於是按照這位網友的步驟，重新把坑又踩了一遍。下面我會把容易出坑的地方在給大家總結一下：
1、正式使用webpack
命令：npx webpack src/main.js --output dist/bundle.js
該命令適用於webpack4.x
2、Babel的安裝與配置
- babel-loader@8+會與當前的webpack版本衝突，推薦使用[email protected]
- babel-preset-es2015和babel-preset-env很有意思，大家可以研究下
3、一切皆模組，資源管理 css module
把css-loader版本降到2.1.1之後，可以指定css的類名格式
解除安裝（刪除）命令：npm uninstalll --save-dev css-loader
下載命令： npm installl --save-dev [email protected]
4、產品構建階段：
- package.json下scripts指令碼build值，Windows下設定為"set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress"
- 優化外掛UglifyJsPlugin，webpack4+已經不是內建的，需要npm install。
- [email protected]，使用這個版本，相容webpack4+
- 去除
build檔案中的殘餘檔案，引入定義方式為const { CleanWebpackPlugin } = require('clean-webpack-plugin')，不要用const CleanWebpackPlugin = require('clean-webpack-plugin')，並注意plugins。