1.基本配置

/* webpack.config.js */

const path = require("node:path")

module.exports = {

  // 模式

  mode: "development", // or "production"

  // 入口

  entry: "./src/main.js",

  // 出口

  output: {

    path: path.resolve(__dirname, "dist"),

    filename: "main.js", // 如果配置了代码分包, 需要改成 "[chunkhash].js", 避免冲突

    clean: true // 自动清空上次打包资源

  },

  // Loader

  module: {

    rules: []

  },

  // Plugins

  plugins: [],

  // 其他配置

  stats: "errors-only" // 终端控制台只输出 error 信息

}

2.Loader

2-1.处理样式资源

npm i style-loader css-loader -D

npm i less-loader -D

npm i sass-loader -D

/* webpack.config.js */

module.exports = {

  module: {

    rules: [

      {

        test: /\.css$/,

        use: ["style-loader", "css-loader"]

      },

      {

        test: /\.less$/,

        use: ["style-loader", "css-loader", "less-loader"]

      },

      {

        test: /\.s[ac]ss$/,

        use: ["style-loader", "css-loader", "sass-loader"]

      }

    ]

  }

}

2.2将 CSS 打包成单独文件

npm i mini-css-extract-plugin -D

Webpack 默认使用 JS 动态创建 style 标签来生成样式。我们可以将 CSS 打包成单独的文件，通过 link 标签加载。

/* webpack.prod.js */

const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module.exports = {

  module: {

    rules: [

      {

        test: /\.css$/,

        use: [MiniCssExtractPlugin.loader, "css-loader"] // 不需要 style-loader

      },

      {

        test: /\.s[ac]ss$/,

        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]

      }

    ]

  },

  plugins: [

    new MiniCssExtractPlugin({

      filename: "static/css/main.css"

    })

  ]

}

2-3.处理 CSS 兼容性

npm i postcss-loader postcss postcss-preset-env -D

/* webpack.prod.js */

// 获取处理样式的 loaders

const getStyleLoaders = (preProcessor) => {

  return [

    MiniCssExtractPlugin.loader,

    "css-loader",

    {

      loader: "postcss-loader",

      options: {

        postcssOptions: {

          plugins: [

            "postcss-preset-env" // 能解决大多数样式兼容性问题

          ]

        }

      }

    },

    preProcessor

  ].filter(Boolean) // 筛选真值

}

module.exports = {

  module: {

    rules: [

      {

        test: /\.css$/,

        use: getStyleLoaders()

      },

      {

        test: /\.less$/,

        use: getStyleLoaders("less-loader")

      },

      {

        test: /\.s[ac]ss$/,

        use: getStyleLoaders("sass-loader")

      }

    ]

  }

}

/* package.json */

{

  "browserslist": ["last 2 version", "> 1%", "not dead"] // 不兼容低版本浏览器

}

2-4.压缩 CSS

npm i css-minimizer-webpack-plugin -D

/* webpack.prod.js */

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")

module.exports = {

  plugins: [

    new CssMinimizerPlugin()

  ]

}

2-5.处理图片资源

在 Webpack4 中，我们通过 url-loader 和 file-loader 对图片资源进行处理，

而 Webpack5 已经内置了这两个 loader，我们只需要简单的配置就行了。

/* webpack.config.js */

module.exports = {

  module: {

    rules: [

      {

        test: /\.(png|jpe?g|gif|webp)$/,

        type: "asset",

        parser: {

          // 优化

          dataUrlCondition: {

            maxSize: 10 * 1024 // 小于 10kb 的图片会被处理成 data URI (base64) 格式

          }

        },

        generator: {

          filename: "static/images/[hash:8][ext][query]", // 输出路径及打包后的图片名

        }

      }

    ]

  }

}

2-6.处理 Babel

npm i babel-loader @babel/core @babel/preset-env -D

npm i @babel/preset-react -D

npm i @babel/preset-typescript -D

/* babel.config.js */

module.exports = {

  // 预设

  presets: [

    "@babel/preset-env", // 处理 JS

    "@babel/preset-react", // 处理 JSX

    "@babel/preset-typescript" // 处理 TS

  ]

}

/* webpack.config.js */

module.exports = {

  module: {

    rules: [

      {

        test: /\.js$/,

        exclude: /node_modules/, // 排除 node_modules 代码不编译

        loader: "babel-loader"

      }

    ]

  }

}

3.Plugins

3-1.处理 HTML

npm i html-webpack-plugin -D

/* webpack.config.js */

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

module.exports = {

  module: {

    plugins: [

      new HtmlWebpackPlugin({

        template: path.resolve(__dirname, "./index.html") // 指定源文件，打包生成一个 html 文件

      })

    ]

  }

}

3-2.处理 Eslint

npm i eslint-webpack-plugin eslint -D

/* .eslintrc.js */

module.exports = {

  // 继承其他规则

  extends: ["eslint:recommended"],

  // 环境变量

  env: {

    node: true, // 启用 node 中全局变量

    browser: true // 启用浏览器中全局变量

  },

  // 解析选项

  parserOptions: {

    ecmaVersion: 6, // ES 语法版本

    sourceType: "module" // ES 模块化

  },

  // 具体检查规则

  // 我们的规则会覆盖掉继承的规则，所以想要修改规则直接改就是了

  rules: {

    "no-var": "error", // 不能使用 var 定义变量

    "semi": "off" // 禁止使用分号

  }

  // ...

  // 其他规则详见：https://eslint.bootcss.com/docs/user-guide/configuring

}

/* webpack.config.js */

const ESLintWebpackPlugin = require("eslint-webpack-plugin")

module.exports = {

  plugins: [

    new ESLintWebpackPlugin({

      context: path.resolve(__dirname, "src") // 出口

    })

  ]

}

3-3.添加版权

/* webpack.config.js */

const webpack = require("webpack")

module.exports = {

  plugins: [

    new webpack.BannerPlugin("最终版权归 ** 所有")

  ]

}

3-4.压缩

npm i terser-webpack-plugin -D

/* webpack.config.js */

const TerserWebpackPlugin = require("terser-webpack-plugin")

module.exports = {

  optimization: {

    minimize: true,

    minimizer: [new TerserWebpackPlugin()]

  }

}

4.高级优化

4-1.提升开发体验

4-2提升打包速度

4-3减小代码体积

4-4优化代码性能

#代码分包

Webpack 默认会把所有代码打包成一个 JS 文件，这样体积太大了，我们可以对代码进行分包减小打包体积。

/* webpack.config.js */

module.exports = {

  optimization: {

    splitChunks: {

      cacheGroups: {

        moment: {

          name: "moment",

          chunks: "all",

          test: /[\\/]node_modules[\\/]moment[\\/]/

        },

        common: {

          name: "common", // 公共依赖、重复依赖

          chunks: "all",

          minChunks: 2 // 引用次数大于 2 就会被分割出来

        }

      }

    }

  }

}

5.项目配置

Vue

npm i webpack -D

npm i webpack-dev-server -D

npm i webpack-cli -D

配置打包命令和启动服务器命令

{

  "scripts": {

    "build": "webpack",

    "dev": "webpack-dev-server"

  }

}

npm i ts-loader -D

npm i typescript -D

支持 TS。

/* webpack.config.js */

const path = require("node:path")

module.exports = {

  module: {

    rules: [

      {

        test: /\.ts$/,

        use: "ts-loader"

      }

    ]

  }

}

npm i vue-loader -D

npm i html-webpack-plugin -D

支持 Vue。

/* webpack.config.js */

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

const { VueLoaderPlugin } = require("vue-loader")

module.exports = {

  module: {

    rules: [

      {

        test: /\.ts$/,

        use: {

          loader: "ts-loader",

          options: {

            appendTsSuffixTo: [/\.vue$/] // 支持 <script lang="ts">

          }

        }

      },

      {

        test: /\.vue$/,

        use: "vue-loader"

      }

    ]

  },

  plugins: [

    new VueLoaderPlugin(),

    new HtmlWebpackPlugin({

      template: "./index.html"

    })

  ]

}

声明 shim.d.ts 文件，让 TS 识别 .vue 后缀。

/* shim.d.ts */

declare module "*.vue" {

  import { DefineComponent } from "vue"

  const component: DefineComponent<{}, {}, any>

  export default component

}

代码分包

/* webpack.config.js */

module.exports = {

  optimization: {

    splitChunks: {

      cacheGroups: {

        common: {

          name: "common", // 公共依赖、重复依赖

          chunks: "all",

          minChunks: 2 // 引用次数大于 2 就会被分割出来

        }

      }

    }

  }

}

将 CSS 提取成单独的文件

/* webpack.config.js */

const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module.exports = {

  module: {

    rules: [

      {

        test: /\.css$/,

        use: [MiniCssExtractPlugin.loader, "css-loader"] // 不需要 style-loader

      },

      {

        test: /\.s[ac]ss$/,

        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]

      }

    ]

  },

  plugins: [

    new MiniCssExtractPlugin({

      filename: "static/css/main.css"

    })

  ]

}