出入口配置

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "bundle.js",
    // 构建时清空上次打包目录
    clean: true,
  },
}

Asset Modules

module.exports = {
   module: {
     rules: [
       {
         test: /\.css$/i,
         use: ['style-loader', 'css-loader'],
       },
       {
         test: /\.(png|svg|jpg|jpeg|gif)$/i,
         type: 'asset/resource',
       },
     ],
   },
 };

Babel配置

module.exports = {
  cacheDirectory: true,
  cacheCompression: false
}

集成eslint

安装插件eslint-webpack-plugin

new EslintWebpachPlugin({
  context: path.resolve(__dirname, '../src'), // 需要检查哪些文件
  exclude: 'node_modules', // 排除文件
  cache: true, // 开启缓存
  cacheLocation: path.resolve(__dirname, '../node_modules/.cache/eslintcahce')
})

常用Plugin

HtmlWebpackPlugin

用于生成html模板，自动加载打包后的依赖

pnpm add -D html-webpack-plugin

const HtmlWebpackPlugin = require("html-webpack-plugin")

plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      title: "My App",
    }),
],

ProgressBarPlugin

打包进度条插件

pnpm add -D progress-bar-webpack-plugin

const ProgressBarPlugin = require("progress-bar-webpack-plugin")

plugins: [
    new ProgressBarPlugin({
      format: `  :msg [:bar] ${":percent"} (:elapsed s)`,
    }),
],