webpack配置文件（笔记）

webpack配置

学习笔记，有错难免，借鉴即可

//用于获取路径
const path = require('path');
//清除旧打包文件
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
//打包html文件的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//提取css文件的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//压缩css文件的插件
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  //入口文件
  entry: './src/js/main.js',
  //出口位置+文件
  output:{
    filename: 'js/[name].[contenthash:10].js',
    path: path.resolve(__dirname, 'dist'),
    // 输出文件的公共目录
    // publicPath: '/',
    //chunk输出的文件名
    chunkFilename: 'js/[name]_chunk.js'
  },
  module: {
    //详细配置,每个对象处理一种文件
    rules:[
      {
        //oneOf作用：优化loader，只匹配一个loader执行，剩下的不执行,注意：用oneOf时，不能有两个loader处理同一个
        oneOf: [
          //处理css
          {
            test: /\.css$/,
            use:[
              //提取css文件
              {
                loader: MiniCssExtractPlugin.loader,
                options:{
                  publicPath: '../'
                }
              },
              'css-loader',
              //处理css兼容性
              {
                loader: 'postcss-loader',
                options:{
                  postcssOptions:{
                    ident: 'postcss',
                    plugins:[
                      //postcss插件，帮助postcss找到package.json中browserslist的配置
                      require('postcss-preset-env')()
                    ]
                  }
                }
              }
            ]
          },
          //处理js兼容
          {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use:[
              //多进程打包
              {
                loader: 'thread-loader',
                options:{
                  workers: 2,
                }
              },
              {
                loader: 'babel-loader',
                options:{
                  presets:['@babel/preset-env'],
                  //用于缓存js模块，在构建时，一个js模块变化，只更新一个模块，其他js模块不变
                  cacheDirectory:true,
                }
              }
            ]
          },
          //图片资源处理
          {
            test: /\.(jpg|png|gif)$/,
            loader: 'url-loader',
            options:{
              //限制要用base64编码处理的文件大小
              limit: 8*1024,
              name:'[contenthash:10]',
              outputPath: 'imgs'
            }
          },
          //处理html的img
          {
            test: /\.html$/,
            loader: 'html-loader',
            options:{
              esModule:false
            }
          },
          //其他资源处理
          {
            exclude: /\.(html|css|js|jpg|png|gif)$/,
            loader: 'file-loader',
            options:{
              outputPath: 'fonts'
            }
          }
        ]
      }
    ]
  },
  optimization:{
    minimize: true,
    minimizer:[
      //压缩css文件
      new CssMinimizerPlugin({
        test:/\.css$/
      }),
      //压缩js
      new TerserPlugin({
        test: /\.js$/
      })
    ],
    //分割代码，将第三方库单独打包成一个文件，单独一个chunk输出
    splitChunks:{
      chunks: 'all',
      minSize: 30*1024, //限制分割的chunk最小文件大小
      maxSize: 0,  //无最大限制
      minChunks: 1, //最少引用多少次才分割
    },
    runtimeChunk: {
      name: entrypoint => `runtime-${entrypoint.name}`
    }
  },
  plugins:[
    new CleanWebpackPlugin(),
    //html打包
    new HtmlWebpackPlugin({
      //模板文件
      template: './src/index.html',
      //压缩html
      minify:{
        //移除空格
        collapseWhitespace: true,
        //移除注释
        removeComments: true
      }
    }),
    //提取css
    new MiniCssExtractPlugin({
      filename: 'css/main.[contenthash:10].css'
    })
  ],
  //解析模块规则
  resolve:{
    //简写路径
    alias:{
      //之后用root就等于src路径了
      // root: path.resolve(__dirname, './src')
    },
    //省略文件后缀名
    extensions: ['.js', '.json'],
    //配置模块搜索目录,在搜索模块时，会优先搜索配置的目录
    modules: [path.resolve(__dirname, 'node_modules'), 'node_modules']
  },
  mode: 'production',
  //开发服务器，用于自动打包，不会生成文件，只会在内存中编译打包
  devServer:{
    contentBase: path.resolve(__dirname, 'dist'),
    //启动gzip压缩，更快
    compress: true,
    //端口号
    port: 3000,
    //自动打开浏览器
    open: true,
    //开启模块热替换
    hot: true,
    //代理，解决跨域
    proxy:{
      //一旦devServer服务器收到/api/xxx的请求，会把请求转发给另一个服务器（这里设置成localhost：3000）
      '/api':{
        target: 'http://loachost:3000',
        //发送请求时，重新请求路径：/api/xxx变成/xxx
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  devtool: 'source-map'
}