webpack（11）配置檔案分離為開發配置、生成配置和基礎配置

Silent丿丶黑羽發表於2021-07-13
Web

前言

上篇我們已經配置好了本地開發伺服器，但是配置的相對比較凌亂，一個檔案中有些是開發時用到的配置，有些是生成時用到的配置，有些是開發和生成都要用到的配置，所以我們這裡把環境分為3個環境

  • webpack.base.config.js：webpack基礎配置，開發和生成環境都需要用到的配置
  • webpack.dev.config.js：開發環境的配置
  • webpack.prod.config.js：生成環境的配置
     

配置分離

development(開發環境) 和 production(生產環境) 這兩個環境下的構建目標存在著巨大差異。在開發環境中，我們需要：強大的 source map 和一個有著 live reloading(實時重新載入) 或 hot module replacement(熱模組替換) 能力的 localhost server。而生產環境目標則轉移至其他方面，關注點在於壓縮 bundle、更輕量的 source map、資源優化等，通過這些優化方式改善載入時間。由於要遵循邏輯分離，我們通常建議為每個環境編寫彼此獨立的 webpack 配置。

雖然，以上我們將 生產環境 和 開發環境 做了細微區分，但是，請注意，我們還是會遵循不重複原則(Don't repeat yourself - DRY)，保留一個 "common(通用)" 配置。為了將這些配置合併在一起，我們將使用一個名為 webpack-merge 的工具。此工具會引用 "common" 配置，因此我們不必再在環境特定(environment-specific)的配置中編寫重複程式碼。

我們先從安裝 webpack-merge 開始，並將之前已經成型的那些程式碼進行分離：

npm install -D webpack-merge

安裝完成以後，我們看下專案結構，我們新建一個build目錄，然後再建立3個js檔案，webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js

webpack.base.config.js配置如下：

const { VueLoaderPlugin } = require('vue-loader')
const path = require('path')
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'bundle.js',
    // publicPath: "dist/"
  },
  resolve: {
    extensions: ['.json', '.js', '.vue', '.css'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
    },
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      {
        test: /\.png/,
        type: 'asset'
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ],
  },
  plugins: [
    // 請確保引入這個外掛！
    new VueLoaderPlugin(),
    new webpack.BannerPlugin("最終版權歸jkc所有"),
    new HtmlWebpackPlugin({ template: 'index.html' }),
  ]
}

 

webpack.dev.config.js配置如下：

const { merge } = require('webpack-merge');
const common = require('./webpack.base.config.js');

module.exports = merge(common, {
  mode: 'development',
  devServer: {
    contentBase: "./dist",
    inline: true
  },
})

 

webpack.prod.config.js配置如下：

const { merge } = require('webpack-merge');
const common = require('./webpack.base.config.js');

module.exports = merge(common, {
  mode: 'production',
});

 

最後一步我們只需要把package.json檔案中的scripts的指令碼命令改成如下即可：

"scripts": {
    "build": "webpack --config ./build/webpack.prod.config.js",  // 生成環境打包
    "dev": "webpack serve --open --config ./build/webpack.dev.config.js"  // 本地開發環境
  },

如果我們正在處於開發階段，就在終端執行npm run dev
如果我們已經開發完成，就在終端執行npm run build

相關文章