面试-JS-Webpack生产环境

生产环境（webpack.prod.js）：需要对代码进行压缩、优化，减少文件大小，提高加载速度，确保代码能够高效运行。

代码压缩与优化：生产环境下，你希望代码被压缩、混淆，以减少文件体积，提高加载速度。开发环境中不需要压缩代码，以便更容易调试。

去掉调试工具：在开发环境下，通常会使用 source maps 来调试代码，但在生产环境下，这些工具没有必要。生产环境下你希望去掉这些调试工具来提升性能。

环境变量：生产环境和开发环境下，使用的 API 地址、数据库连接等可能不同，需要通过环境变量来区分。

资源缓存优化：在生产环境中，通常会启用文件名的哈希（hashing）功能，以便浏览器能够对静态资源进行长期缓存，防止用户加载旧的文件。

提取 CSS 到单独文件：在生产环境中，通常会将 CSS 从 JavaScript 中提取到单独的文件中，以便浏览器更好地缓存 CSS 文件。

1. 创建 webpack.prod.js（生产环境配置）
   生产环境需要对代码进行优化、压缩，并且提取 CSS 到单独的文件中，启用文件的缓存优化。

const { merge } = require('webpack-merge');  // 合并配置工具
const common = require('./webpack.common.js');  // 引入通用配置
const MiniCssExtractPlugin = require('mini-css-extract-plugin');  // 提取 CSS
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');  // 压缩 CSS
const TerserPlugin = require('terser-webpack-plugin');  // 压缩 JS

module.exports = merge(common, {
  mode: 'production',  // 设置生产模式
  output: {
    filename: '[name].[contenthash].js',  // 使用 contenthash 以便文件缓存
    path: path.resolve(__dirname, 'dist'),  // 输出目录
    clean: true,  // 每次打包前清理 dist 文件夹
  },
  optimization: {
    minimize: true,  // 开启代码压缩
    minimizer: [
      new TerserPlugin(),  // 压缩 JS
      new CssMinimizerPlugin(),  // 压缩 CSS
    ],
    splitChunks: {  // 分离第三方库到独立文件
      chunks: 'all',
    },
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',  // 提取 CSS 并添加 contenthash
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],  // 提取 CSS 到单独文件
      },
    ],
  },
});

其中 filename: '[name].[contenthash].css'，只要文件没有被改动，这个文件名也不会变。

在 package.json 中配置不同环境的构建脚本：

{
  "scripts": {
    "start": "webpack serve --config webpack.dev.js",  // 开发环境
    "build": "webpack --config webpack.prod.js"  // 生产环境
  }
}