前景回顾

上一篇文章主要讲述了webapck入门相关的配置，知识点清单：

entry（单页面，多页面）
output（css，js输入到指定目录）
loader（加载解析css，scss，sass）
plugins（BundleAnalyzerPlugin分析打包module，CleanWebpackPlugin清除打包相关文件夹，HtmlWebpackPlugin输入打包压缩引入后的css，js的入口文件，MiniCssExtractPlugin抽离css文件）
抽离公共组件，插件，组件库等知识点
传送门[juejin.cn/post/701365…]

前言

项目开发过程中，一般会区分开发，测试，生产环境，打包运行不同代码块（三种环境通过环境变量区分），区别：

测试和生产主要区别，生产环境需要去除所有的log，测试环境还可能需要开启Source Map，接口baseUrl可能不同
开发环境需要支持模块热更新，代理的配置
测试和生产环境需要进行一些代码的混淆压缩，公共模块的抽离提取

设置环境变量，不同环境执行不同的脚本

安装cross-env，这是一款运行跨平台设置和使用环境变量的插件。npm install --save-dev cross-env
区分不同环境的打包配置，分为开发，测试，生产三个打包的配置，测试和生产环境的打包配置区别不是非常大，所以不单独拎出来配置，会在生产配置中通过环境变量区分，引入和使用部分插件
区分三个不同的配置文件webpack.base.config.js,webpack.dev.config.js,webpack.pro.config.js,
执行不同的脚本需要合并base.confing.js,
安装插件webpack-merge，这是一款为Webpack设计的合并配置的插件，npm i webpack-merge --save-dev
配置不同的打包文件，项目目录结构：

配置打包文件

webpack.dev.config.js

安装webpack-dev-server，npm i webpack-dev-server --save-dev,
配置devServer，
配置webpack.dev.config.js

const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.base.config");
const NODE_ENV = process.env.NODE_ENV;
const HOST = process.env.HOST || 'localhost' || '0.0.0.0';
console.log(NODE_ENV, "NODE_ENV");
module.exports = merge(baseConfig, {
  mode: NODE_ENV,
  devServer: {
    host: HOST,
    open: true,
    port: '8888',
  },
  devtool: "inline-source-map",
});

webpack.base.config.js

区分是否是开发环境，非开发环境需要安装npm install mini-css-extract-plugin --save-dev,抽离，分离css文件到单独的css文件夹下，
安装css的loader，区分是否是生产环境，非生产环境打开sourceMap
配置webpack.base.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV === "development";
const testMode = process.env.NODE_ENV === "test";

module.exports = {
  entry: ['./index.js'],
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "js/[name].[chunkhash:8].js",
    //[name]文件名，[chunkhash:8]的意思是每次输出在文件后随机生成一个8位数，让文件不一样
  },
  module: {
    rules: [
      {
        test: /\.(le|sa|sc|c)ss$/,
        use: [
          // 将 JS 字符串生成为 style 节点
          devMode ? "style-loader" : MiniCssExtractPlugin.loader,
          // 将 CSS 转化成 CommonJS 模块
          {
            loader: "css-loader",
            options: {
              // 每一个 CSS 的 `@import` 与 CSS 模块/ICSS 都会运行 `postcss-loader`，不要忘了 `sass-loader` 将不属于 CSS 的 `@import` 编译到一个文件中
              // 如果您需要在每个 CSS 的 `@import` 上运行 `sass-loader` 和 `postcss-loader`，请将其设置为 `2`。
              importLoaders: 1,
              // minimize: true,
              sourceMap: process.env.NODE_ENV !== "production",
            },
          },
          // 将 Sass 编译成 CSS
          "sass-loader",
          "less-loader"
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({ template: "./public/index.html" }),
    
  ],
  // watch: true 
};

webpack.pro.config.js

webpack5内置terser-webpack-plugin,用于配置js压缩
安装压缩css插件，npm install css-minimizer-webpack-plugin --save-dev
配置webpack.pro.config.js

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.base.config");
// const NODE_ENV = process.env.NODE_ENV;
const devMode = process.env.NODE_ENV !== "production";
module.exports = merge(baseConfig, {
  //   mode: NODE_ENV,
  devtool: devMode ? "inline-source-map" : false,
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: true,
        },
      }),
      new CssMinimizerPlugin()
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: "css/[name].[chunkhash:8].css",
    }),
  ],
});

Webpack入门（多环境配置）

前景回顾

前言

设置环境变量，不同环境执行不同的脚本

配置打包文件