webpack 静态资源配置

webpack 处理静态资源

处理静态资源可以直接依赖webpack5自带的Asset 模块

module.exports = {
	module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|bpm|svg|webp)(\?.*)?$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 10240
          }
        },
        generator: {
          filename: 'image/[name].[hash][ext]'
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 10240
          }
        },
        generator: {
          filename: 'static/fonts/[name].[hash][ext]'
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|m4a|wav|flac|aac)(\?.*)?$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 10240
          }
        },
        generator: {
          filename: 'static/media/[name].[hash][ext]'
        }
      },
      {
        resourceQuery: /raw/,
        type: 'asset/source'
      }
    ]
  },
}

其他技巧

rule.test.toString().includes('scss')

判断当前加载器是否是 Sass 样式加载器

rule.use[1].options 修改 css-loader

rule.use 是一个数组，包含了一系列加载器的配置信息，按照从右到左的顺序依次执行。

Create React App后，通常都会包含以下几个元素：

• style-loader：将 CSS 代码注入到 HTML 中的

• css-loader：解析 CSS 代码，处理其中的依赖关系。

• postcss-loader：使用 PostCSS 处理 CSS 代码，例如添加浏览器前缀、压缩代码等。

• resolve-url-loader：处理 CSS 中的相对路径，使其能够正确地被解析。

• sass-loader 或 less-loader 或 stylus-loader：处理 SCSS、LESS 或 Stylus 代码，将其转换为 CSS。（create react app选的样式加载器）

我们需要修改css-loader 的options，也就是 rule.use[1].options，来更换csss-loader