我們每次修改代碼之后，如果想要在瀏覽器中看到變化，都先要手動編譯代碼，這樣未免有些麻煩
在 webpack 中，配置某些選項可以幫助我們在代碼發生變化之后自動編譯代碼
1、存在問題
首先我們搭建一個簡單的項目，感受一下在不使用自動編譯之前項目開發的狀態
創建一個空文件夾 Demo，作為項目的根目錄，在該目錄下運行如下命令安裝項目所需依賴
> # 創建 package.json 文件
> npm init -y
> # 安裝 webpack
> npm install --save-dev webpack
> npm install --save-dev webpack-cli
> # 安裝 lodash
> npm install --save lodash
然后我們在根目錄下創建 dist 和 src 目錄，並在相應的目錄下創建相應的文件，最終的目錄結構如下
Demo
- package.json
- package-lock.json
- webpack.config.js
+ node_modules
+ src
- index.js
+ dist
- index.html
webpack.config.js 文件內容，指定 webpack 的一些基本配置
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
package.json 文件內容，添加打包命令 npm run build
{
"name": "Demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.39.2",
"webpack-cli": "^3.3.7"
},
"dependencies": {
"lodash": "^4.17.15"
}
}
/dist/index.html 文件內容，引入打包之后的 bundle.js文件
<!doctype html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
/src/index.js 文件內容，創建一個 div，並將其作為 body 的子節點
import _ from 'lodash';
function component() {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
至此，一個粗糙的 Demo 就搭建完成啦，運行構建命令即可完成打包
> npm run build
這時用瀏覽器打開 /dist/index.html 文件，應該可以看到 Hello webpack 的文字
好了，現在假如我們要對項目作一點小小的修改，讓屏幕上顯示的文字變成 Hello World
很簡單，對吧！只需要修改 /src/index.js 文件的一點內容就行
import _ from 'lodash';
function component() {
var element = document.createElement('div');
// 將 webpack 改成 World 就好
element.innerHTML = _.join(['Hello', 'World'], ' ');
return element;
}
document.body.appendChild(component());
但是，這時候我們又要重新運行構建命令 npm run build 才能使改動生效
這樣很不方便，特別是對於前端的代碼，有時候的確需要反反復復修改和編譯十幾次乃至幾十次
2、解決問題
那么，有沒有一種方法可以使改動之后的代碼（ 保存之后 ）自動編譯呢？答案是肯定的
webpack 中有兩種常見的方法實現這種效果
（1）watch mode
第一種方法是使用 watch mode，顧名思義，就是可以在觀察到代碼發生變化之后自動編譯代碼
我們可以通過 webpack 的命令行參數 --watch 指定使用，這樣當代碼發生變化后，webpack 將會自動編譯
> npx webpack --config webpack.config.js --watch
或者我們可以加上 npm script 腳本，方便以后使用，修改 package.json 文件如下
{
"name": "Demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js",
"watch": "npx webpack --config webpack.config.js --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.39.2",
"webpack-cli": "^3.3.7"
},
"dependencies": {
"lodash": "^4.17.15"
}
}
好，開啟觀察模式
> npm run watch
現在修改代碼，保存文件，刷新瀏覽器，應該就能看到修改之后的效果啦，唯一的缺點就是瀏覽器不會自動刷新
（2）webpack-dev-server
第二種方法是使用 webpack-dev-server，提供一個簡單的 web 服務器，實時加載
首先，我們安裝一下模塊
> npm install --save-dev webpack-dev-server
然后在 webpack.config.js 文件寫下相關配置
告訴 server 應該在 localhost:8080 下建立服務，然后將 dist 目錄下的文件設置為可訪問
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
// 開啟開發服務器
devServer: {
contentBase: './dist'
}
};
也是添加一個 npm script 腳本，方便以后使用，修改 package.json 文件如下
{
"name": "Demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js",
"watch": "webpack --config webpack.config.js --watch",
"start": "webpack-dev-server --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.39.2",
"webpack-cli": "^3.3.7"
},
"dependencies": {
"lodash": "^4.17.15"
}
}
好，現在開啟開發服務器
> npm start
之后修改代碼，保存文件，應該能夠看到瀏覽器自動刷新，並且展示修改之后的結果
【 閱讀更多 webpack 系列文章，請看 webpack學習筆記 】