webpack配置优化

const os = require(‘os’)
const path = require(‘path’)
// const ESLintPlugin = require(‘eslint-webpack-plugin’);
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
const WebpackBar = require(‘webpackbar’)
const ProgressBarWebpackPlugin = require(‘progress-bar-webpack-plugin’)
//此插件将css提取成单文件替换style-loader
const MiniCssExtractPlugin = require(“mini-css-extract-plugin”);
const CssMinimizerPlugin = require(“css-minimizer-webpack-plugin”);
//压缩js需要手动引入
const TerserWebpackPlugin = require(“terser-webpack-plugin”) //webpack内置的
//启用多进程打包//在项目比较大打包慢时启用
const threads = os.cpus().length
//解决js兼容性问题 babel 和core-js(解决promise和async) core-js是生产依赖
// webpack默认开启了treeshaking

function getStyleLoader(pre){
return [
MiniCssExtractPlugin.loader,
“css-loader”,
{
loader: “postcss-loader”,
options: {
postcssOptions: {
plugins: [
“postcss-preset-env”//能解决大部分样式兼容性问题
]
}
}
},
pre
].filter(Boolean)
}

//代码分割，多入口对应多输出

module.exports = {
// entry: ‘./src/index.js’,
entry: {
//多入口配置
app: “./src/index.js”,
// main: “./src/main.js”
},
devtool: ‘source-map’,
output: {
path: path.resolve(__dirname,‘dist’),
// filename: ‘js/main.js’,
filename: ‘static/js/[name].[hash:5].js’,
chunkFilename: ‘static/js/[name].chunk.[hash:5].js’,//指定打包输出的其它文件名
//统一图片、字体等通过type:asset处理资源命名方式
assetModuleFilename: “static/images/[hash:5][ext][query]”,
clean: true
},
mode: ‘development’,
devServer: {
host: ‘localhost’,
port: 3333,
open: true,
hot: true //开启HMR热模块替换 对js文件需要特殊处理(vue-loader 或 react-loader就解决了这个问题)
},
module: {
rules: [
{
//每个文件只能被其中一个处理
oneOf: [
{
test: /.cssKaTeX parse error: Expected 'EOF', got '}' at position 211: …er() }̲, { …/,
// use: [
// { loader: ‘style-loader’ },
// {
// loader: ‘css-loader’
// },
// { loader: ‘less-loader’ },
// ]
use: getStyleLoader(“less-loader”)

        // [
        //   MiniCssExtractPlugin.loader, 
        //   "css-loader",
        //   {
        //     loader: "postcss-loader",
        //     options: {
        //       postcssOptions: {
        //         plugins: [
        //           "postcss-preset-env"//能解决大部分样式兼容性问题 ,还需要去package.json配置兼容到什么程度
        //           // "browserslist": [ 实际应该这么配置
        //           //   "last 2 version",
        //           //   "> 1%",
        //           //   "not dead"
        //           // ]
        //         ]
        //       }
        //     }
        //   },
        //   "less-loader"
        // ],
      },
      {
        test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
        type: 'asset',//这个会转base64
        parser: {
          dataUrlCondition: {
            maxSize: 10*1024
          }
        },
        generator: {
          // filename:'static/images/[hash:5][ext][query]'
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf|mp3|mp4|avi)(\?.*)?$/,
        type: 'asset/resource',//这个会原封不动的输出
        generator: {
          // filename:'static/images/[hash:5][ext][query]'
        }
      },
      {
        test: /\.js?$/,
        // exclude: /node_modules/,//处理js文件时排除node_modules
        include: path.resolve(__dirname,"./src"),
        use: [
          {
            loader: "thread-loader",
            // options: {
            //   works: threads //指定进程数量
            // }
          },
          {
            loader: 'babel-loader',
            //可以在这里面写，也可以在外面写
            options: {
              // presets: ["@babel/preset-env"]
              cacheDirectory: true,// 开启babel缓存
              cacheCompression: false, //关闭缓存文件的压缩
              plugins: ["@babel/plugin-transform-runtime"]//减少代码体积
            }
          }
        ]
      }
    ]
  }
]

},
// optimization: {
// minimizer: [
// // 在 webpack@5 中，你可以使用 ... 语法来扩展现有的 minimizer（即 terser-webpack-plugin），将下一行取消注释
// // ...,

// ],
// },

optimization: {
splitChunks: {
chunks: “all”, //对所有模块进行分割
cacheGroups: {

  }
},
minimizer: [
  //压缩js
  new TerserWebpackPlugin(),
  // new TerserWebpackPlugin({
  //   parallel: threads //开启多进程
  // }),
  //压缩css
  new CssMinimizerPlugin()
],
//配置runtime生成各文件的依赖关系
runtimeChunk: {
  name: (entryPoint) => `runtime~${entryPoint.name}.js`
}

},

plugins: [
// new ESLintPlugin({
// context: path.resolve(__dirname,‘src’),
// exclude: “node_modules”,
// cache: true,//开启缓存
// cacheLocation: path.resolve(__dirname,“./node_modules/.cache/eslintcache”),//指定eslint缓存文件位置
// // threads //开启多进程//设置进程数量
// }),
new HtmlWebpackPlugin({
//此设置保留html原格式
template: path.resolve(__dirname,‘public/index.html’)
}),
new MiniCssExtractPlugin({
// filename: ‘static/css/main.css’//可能会是多入口，生成多个css
filename: ‘static/css/[name].css’,
chunkFilename: ‘static/css/[name].chunk.css’
}),
// new TerserWebpackPlugin({
// parallel: threads
// }),
// new CssMinimizerPlugin(),
new WebpackBar(),
new ProgressBarWebpackPlugin()
],
}