Webpack中常用的Loader和Plugin

1. 常用的 Loader

1.1. Babel Loader

• 用于将 ES6+ 代码转译为 ES5。

• 示例：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
};

1.2. CSS Loader和 Style Loader

• css-loader 使你可以使用类似 @import 和 url() 的方式实现 require() 的功能。

• style-loader 将 CSS 插入到 DOM 中。

• 示例：

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

1.3. Sass Loader

• 将 Sass/SCSS 文件编译为 CSS。

• 示例：

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
};

1.4. File Loader和 Asset Modules

• Webpack 5 引入了内置的 Asset Modules，可以代替 file-loader 和 url-loader。

• 示例：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|svg)$/,
        type: 'asset/resource', // 类似于 file-loader
        generator: {
          filename: 'images/[hash][ext][query]',
        },
      },
      {
        test: /\.txt$/,
        type: 'asset/source', // 导出资源的源代码
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        type: 'asset/inline', // 类似于 url-loader
      },
    ],
  },
};

2. 常用的 Plugin

2.1. HTML Webpack Plugin

• 生成一个 HTML 文件，并自动注入所有的生成的 bundle。

• 示例：

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
};

2.2. Clean Webpack Plugin

• Webpack 5 中可以通过 output.clean 选项替代 clean-webpack-plugin。

• 示例：

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    cle