环境变量的使用

Webpack中文：
环境变量 | webpack 中文文档

想要消除webpack.config.js在开发环境和生产环境之间的差异，你可能需要环境变量(environment variable)。
Webpack命令行环境配置的--env参数，可以允许你传入任意数量的环境变量。而在webpack.config.js中可以访问到这些环境变量。例如：--env production或--env NODE_ENV=local

配置build脚本命令的环境变量：

"scripts": {
  "dev": "webpack serve --config ./build/webpack.common.js",
  "build": "webpack --env production --config ./build/webpack.common.js"
},

引入webpack.dev.js和webpack.prod.js的配置文件，使用环境变量对象进行判断合并：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { merge } = require("webpack-merge");
const webpack = require("webpack");
const devConfig = require("./webpack.dev");
const prodConfig = require("./webpack.prod");
const commonConfig = {
  entry: {
    main: "./src/index.js",
  },
  output: {
    path: path.resolve(__dirname, "../dist"),
  },
  module: {
    rules: [{
      test: /\.jpg|.jpeg|.png$/,
      use: {
        loader: "url-loader",
        options: {
          limit: 54000,
          name: "[name].[ext]",
          outputPath: "/images",
        }
      }
    }, {
      test: /\.m?js$/,
      exclude: /node_modules/, //  排除node_modules下的代码
      use: {
        loader: "babel-loader"
      }
    }]
  },
  optimization: {
    // TreeShaking 的配置
    usedExports: true,
    // SplittingCode 的配置
    splitChunks: {
      // 分割引入代码库的方式，默认为 async 异步，可选 all：同步和异步
      chunks: 'all', 
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          name: "chunk"
        }
      }
    },
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    }),
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: [
        path.resolve(__dirname, '../dist')
      ],
    }),
    // 在其他模块中发现使用了 $ 将自动引入 jquery，且赋值给 $
    new webpack.ProvidePlugin({
      $: "jquery"
    })
  ],
}
// 使用 env 对象进行判断
module.exports = (env) => {
  if (env && env.production) {
    return merge(commonConfig, prodConfig)
  } else {
    return merge(commonConfig, devConfig)
  }
}

导出dev环境的配置文件：

const devConfig = {
  mode: "development",
  devtool: "eval-cheap-module-source-map",
  output: {
    filename: "[name].js",
  },
  devServer: {
    contentBase: "./dist",
    open: true,
    hot: true, // 让 webpack-dev-server 开启 module-replacement 的功能
    hotOnly: true, // 即便css样式没有生效也不让浏览器自动刷新页面
  },
  module: {
    rules: [{
      test: /\.scss$/,
      use: ["style-loader", {
        loader: "css-loader",
        options: {
          importLoaders: 2,
          modules: true
        }
      }, "sass-loader", "postcss-loader"]
    }, {
      test: /\.css$/,
      use: ["style-loader", "css-loader", "postcss-loader"]
    }]
  }
}
module.exports = devConfig;

导出prod环境的配置文件：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const prodConfig = {
  mode: "production",
  devtool: "cheap-module-source-map",
  output: {
    filename: "[name].[contenthash].js",
  },
  optimization: {
    // CSS代码压缩
    minimizer: [
      new CssMinimizerPlugin(),
    ],
  },
  module: {
    rules: [{
      test: /\.scss$/,
      use: [MiniCssExtractPlugin.loader, {
        loader: "css-loader",
        options: {
          importLoaders: 2,
          modules: true
        }
      }, "sass-loader", "postcss-loader"]
    }, {
      test: /\.css$/,
      use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"]
    }]
  },
  plugins: [new MiniCssExtractPlugin({
    filename: "[name].[hash].css"
  })]
}
module.exports = prodConfig;