Webpack輕松入門（五）——自動重新整理

我在之前文章 Webpack輕松入門（二）——CSS打包

中提到過Webpack中的自動打包功能，很簡單，在webpack.config.js中添加 watch: true 配置，打包一次之後每次代碼更新後都會自動進行打包而無需重複輸入指令行。

當然，我們也可以直接給package.json中的scripts添加相關配置，而無需更改webpack.config.js。

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --watch"
}
           

換句話說，package.json中的

webpack --watch

與webpack.config.js中的

watch: true

效果相同。

實際上，Webpack還提供了一個比watch更友善的功能，它不僅可以實作自動打包，還具有自動打開浏覽器和自動重新整理頁面的功能，可以說給我們這幫懶人服務到了極緻，哈哈。

下面我們就來看看具體如何實作這樣的功能。

1. 安裝webpack-dev-server

npm i -D webpack-dev-server
           

2. package.json中的scripts添加相關配置

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "dev": "webpack-dev-server --open"
}
           

其中

--open

就代表打開預設浏覽器。

3. 輸入指令行進行打包

npm run dev
           

打包結束後你會發現浏覽器自動打開，并且正确顯示打包後的頁面。

4. 更改任意代碼

我們可以試着在index.js中添加以下代碼：

var module = require('./module.js');

alert(module.text);
           

module.js：

var text = 'Hello Webpack!';

module.exports = {
    text: text
};
           

儲存後你會發現浏覽器自動重新整理并彈出彈框“Hello Webpack!”。

值得注意的是，通過webpack-dev-server打包後的代碼并不會進入dist目錄，而是直接建立一個開發伺服器，并運作打包後的代碼。是以，通常我們會将Webpack打包分為兩種模式：開發模式和生産模式。

開發模式顧名思義就是給我們開發時候用的，這時候我們就可以用上webpack-dev-server，從代碼自動打包到自動開啟浏覽器再到自動重新整理全部自動化，提高了工作效率；生産模式顧名思義就是最終代碼上線時候用的，這時候我們就隻需使用其最基礎的打包功能，最終打包後的代碼會進入dist目錄，我們隻需要将其上傳伺服器即可。

本文重點總結

① 使用 webpack-dev-server 可自動建立開發伺服器，實作代碼從自動打包到自動重新整理頁面的自動化開發模式

② Webpack有兩種打包模式：開發模式和生産模式，開發模式下可使用 webpack-dev-server 提高開發效率