资源加载

加载css (npm install style-loader css-loader —save-dev)

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

MiniCssExtractPlugin (npm install mini-css-extract-plugin —save-dev)

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: "css/[name].css"
    })
  ]
  rules:[
    {
      test: /\.css$/i,
      use:[MiniCssExtractPlugin.loader, "css-loader"]
    }
  ]
}

本插件会将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载。

加载images

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

webpack 5

https://webpack.docschina.org/guides/asset-modules/#custom-output-filename
在 webpack 5 之前，通常使用：

• raw-loader 将文件导入为字符串
• url-loader 将文件作为 data URI 内联到 bundle 中
• file-loader 将文件发送到输出目录

资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：

• asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
• asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
• asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
• asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。

当在 webpack 5 中使用旧的 assets loader（如 file-loader/url-loader/raw-loader 等）和 asset 模块时，你可能想停止当前 asset 模块的处理，并再次启动处理，这可能会导致 asset 重复，你可以通过将 asset 模块的类型设置为 'javascript/auto' 来解决。

module.exports = {
  module: {
   rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            }
          },
        ],
       type: 'javascript/auto'
      },
   ]
  },
}

webpack5打包iconfont 和图片资源

{
  test: /\.(png|svg|jpg|jpeg|gif)$/i,
    type: 'asset/resource',
      generator: {
        filename: 'static/img/[hash][ext][query]'
      }
},
  {
    test: /\.(woff|woff2|eot|ttf|otf)$/i,
      type: 'asset/resource',
        generator: {
          filename: 'static/icon/[hash][ext][query]'
        }
  },