基础用法

官方文档

webpack5 官方文档

npm i webpack webpack-cli -D

entry 项目入口

output构建产物输出

1oader 各类资源处理

如果配置了多个`loader`，按照从右到左的顺序执行

module: {
  rules: [
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader'],
    },
  ]
}

处理样式资源

CSS

虽然使用 css-loader 可以将 CSS 文件转换为 JavaScript 模块，但是这仅仅是将 CSS 代码打包进 JavaScript 文件中，并没有将样式应用到页面上。因此，还需要使用 style-loader 将 CSS 代码动态地插入到HTML页面的 <style> 标签中，从而实现将样式应用到页面上的功能

SCSS

 {
  test: /\.scss$/,
   use: ['style-loader', 'css-loader', 'sass-loader']
  }

使用MiniCssExtractPlugin.loader会将 CSS 提取到单独的文件中，注意的是它和style-loader冲突

Plugin功能扩展

提示

Loader主要是用于处理模块的转换，Plugin则是用于扩展Webpack的功能。在Webpack的打包过程中，Loader和Plugin是密不可分的两个部分，Loader用于将不同类型的文件转换为Webpack可处理的模块，Plugin则用于在打包过程中执行自定义的任务和操作

HtmlWebpackPlugin 创建html

MiniCssExtractPlugin 提取css

CssMinimizerWebpackPlugin 压缩css

需要在 optimization.minimizer配置

    optimization: {
        minimizer: [
            new CssMinimizerPlugin(),
        ],
    },

mode 构建模式