前言
一般來講 Webpack 都會有兩種開發模式，一種是 prod 與 dev，這邊就來記錄一下該如何設置 prod 與 dev 吧!
prod 與 dev 是什麼?
製作之前必須先科普一下 prod 與 dev 這兩個東西是什麼的縮寫
- prod： production (上線 or 生產版本)，通常這個版本是會針對檔案做壓縮以及優化
- dev ： development (開發 or 編譯版本)，簡單來講就是只做編譯的動作
那這兩個版本差異在哪裡？當我們系統還沒開發完成時都會在 loacl (本地端) 做測試，但是如果我們每一次測試都要做做壓縮以及優化，其實這會浪費不少效能，如果專案大小夠大的話，就有可能導致電腦停在那邊什麼事情都不能做，所以通常都會區分為 prod 與 dev，那這邊就來記錄一下該怎麼做吧!
webpack4
首先 webpack4 在預設編譯的情況下是 prod 的模式，舉例如果我只輸入 webpack，你會發現 webpack 壓縮及優化了檔案
那我們該如何避免這種狀況？最簡單的方式就是針對 package.json 做自定義的啟動指令(我將原本 start 修改為 server)
1
2
3
4
5
6
| "scripts": {
"server": "webpack-dev-server --config webpack.config.js",
"dev": "webpack --watch --mode development",
"prod": "webpack --mode production",
"test": "jest"
},
|
那我們就可以試著輸入 npm run dev 來看看結果囉
但是由於我們有安裝 webpack-dev-server，而 webpack-dev-server 本身就與 dev 類似，所以其實不使用也沒關係。
這邊主要是要講解 --watch 這個東西，--watch 簡單來講就是監聽，所以當 webpack 執行帶有 --watch 的指令時是不會停止的，你會看到底線一直處於閃爍中
那 prod 則是輸入完後就可以在輸入指令
當然這邊其實有一個很嚴重的錯誤，也就是執行 npm run dev 的時候，其實還是會做壓縮打包的動作，所以這邊要做一下調整
新增 dev & prod 檔
建立兩個檔案，分別為 webpack.config.prod.js、webpack.config.dev.js，所以總共會有三個檔案
然後這邊還會再安裝一個套件 webpack-merge
1
| npm install --save-dev webpack-merge
|
webpack-merge 的用處在於幫助我們合併檔案，讓我們不用再重複撰寫程式碼，因為 dev 與 prod 的版本其實差異不大，如果又複製來複製去這樣子在管理上是滿亂的，這邊會附上拆開來的程式碼
webpack.config.dev.js
1
2
3
4
5
6
7
8
9
10
11
| const merge = require('webpack-merge');
const config = require('./webpack.config.js');
module.exports = merge(config, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
port: 3000,
}
});
|
webpack.config.prod.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| const merge = require('webpack-merge');
const config = require('./webpack.config.js');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');
module.exports = merge(config, {
mode: 'production',
devtool: 'source-map',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.[hash].js'
},
module: {
rules: [
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true,
},
}]
},
plugins: [
new CleanWebpackPlugin(),
],
});
|
webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
| const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
mode: 'development',
devtool: 'inline-source-map',
entry: [
'./src/js/index.js',
'./src/scss/all.scss',
],
module: {
rules: [{
test: /\.(scss|sass)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
sourceMap: true
}
},
{
loader: "sass-loader",
options: {
sourceMap: true
}
}
]
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
}
}
},
{
test: /\.pug/,
loader: ['html-loader', 'pug-html-loader']
},
{
test: /\.(png|jpe?g|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
publicPath: '../image',
outputPath: './image',
},
},
],
}]
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/page/index.pug',
filename: 'index.html'
}),
new MiniCssExtractPlugin({
path: path.resolve(__dirname, 'dist'),
filename: 'css/all.css'
})
],
};
|
package
1
2
3
4
5
| "scripts": {
"serve": "webpack-dev-server --config webpack.config.dev.js",
"prod": "webpack --config webpack.config.prod.js",
"test": "jest"
},
|
參考文章
devtool里的7种SourceMap模式是什么鬼？
[Webpack]No.5 第二份 webpack.config 設定