是 Ray 不是 Array

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

Advertisement
2019-06-09 Webpack

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

#Webpack #關於 Webpack 學習這件小事

前言

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

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

Advertisement

你的支持會直接轉換成更多技術筆記

如果我的筆記讓你少踩一個坑、節省 Debug 的時間，
也許你可以請我喝杯咖啡，讓我繼續當個不是 Array 的 Ray ☕

buymeacoffee | line | portaly

Terminal

相關文章

EP-12-關於-Webpack-學習這件小事之 CSS 壓縮

2019-06-09

EP 10 - 關於 Webpack 學習這件小事之測試單元

2019-06-09

EP 9 - 關於 Webpack 學習這件小事之打包圖片

2019-06-08

EP 8 - 關於 Webpack 學習這件小事之清除文件

2019-06-07

分享這篇文章

留言

© 2025 Ray. All rights reserved.

Powered by Ray Theme