二. webpack的生产配置

一. 简介

生产的配置在开发上面进行优化，表示优化点加注释 ---

二. 安装

在开发的安装上在增加一些

npm install --save-dev mini-css-extract-plugin
npm install css-minimizer-webpack-plugin --save-dev
npm install terser-webpack-plugin --save-dev

三. 配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
  // 入口
  entry: {
    index: './src/index.js',
  },
  // 出口
  output: {
    // publicPath: "./tt", // 需要部署的线上路径----
    filename: 'script/[name].bundle.js', 
    path: path.resolve(__dirname, './dist'), // 輸出目录
    clean: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html', // 引用的模板
      filename: 'index.html',
      inject: 'body' // 资源引入的位置
    }),
    new MiniCssExtractPlugin({
      filename: 'styles/[contenthash].css',
    })
  ],
  mode:  'production', // 生产模式----
  devtool: false, // source-map----
  devServer: { 
    static: './dist',
  },
  module: {
    rules: [
      { // 所有 .png 文件都将被发送到输出目录，并且其路径将被注入到 bundle 中
        test: /\.(png|svg)/,
        type: 'asset/resource',
        generator: {
          filename: 'static/[hash][ext]' // 表示dist目录下生成资源目录
        }
      },
      // {
      //   test: /\.svg/,
      //   type: 'asset/source' // 导出资源的源代码
      // },
      {
        test: /\.(css|scss)$/,
        use: [
          MiniCssExtractPlugin.loader, // link引入
          'css-loader',  // 加载css
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'autoprefixer',
                    {
                      // 选项
                    },
                  ],
                ],
              },
            },
          },
          'sass-loader' // 将 Sass 编译成 CSS
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'static/iconfont/[hash][ext]' // 表示dist目录下生成资源目录
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules目录
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      
      }

    ]
  },
  optimization: {
    minimizer: [
      // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
      // `...`,
      new CssMinimizerPlugin(), // 压缩 CSS 文件
      new TerserPlugin() // 压缩js
    ],
    splitChunks: { // 将第三方的包打入一个文件中，避免多次引入同一个第三方库
       cacheGroups: {
         vendor: {
           test: /[\\/]node_modules[\\/]/,
           name: 'vendors',
           chunks: 'all',
         },
       },
     },
  },

}