前言
一般來講 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 設定