EP-11-關於-Webpack-學習這件小事之 prod 與 dev?

前言

一般來講 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"
},

scripts

那我們就可以試著輸入 npm run dev 來看看結果囉

npm run dev

但是由於我們有安裝 webpack-dev-server,而 webpack-dev-server 本身就與 dev 類似,所以其實不使用也沒關係。

webpack-dev-server

這邊主要是要講解 --watch 這個東西,--watch 簡單來講就是監聽,所以當 webpack 執行帶有 --watch 的指令時是不會停止的,你會看到底線一直處於閃爍中

dev

那 prod 則是輸入完後就可以在輸入指令

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 設定

Liker 讚賞

這篇文章如果對你有幫助,你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee Buy Me A Coffee

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ