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)

"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

npm install --save-dev webpack-merge

webpack-merge 的用處在於幫助我們合併檔案，讓我們不用再重複撰寫程式碼，因為 dev 與 prod 的版本其實差異不大，如果又複製來複製去這樣子在管理上是滿亂的，這邊會附上拆開來的程式碼

webpack.config.dev.js

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

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

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

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