解决webpack5打包CSS图片路径不正确问题

问题

最近在重构博客时，遇到了一个问题。在生产模式下，使用的MiniCssExtractPlugin.loader代替style-loader，但图片、字体等资源文件输出路径设置不正确，webpack 配置如下：

module.exports = merge(common, {
  target: 'browserslist',
  mode: 'production',
  devtool: false,
  output: {
    path: path.resolve(ROOT_PATH, './build'),
    publicPath: './',
    filename: 'js/[name].[contenthash:8].js',
    chunkFilename: 'js/[name].[contenthash:8].js',
    // 资源
    assetModuleFilename: 'assets/[name].[contenthash:8].[ext]'
  },
  plugins: [
    // 生产模式使用了MiniCssExtractPlugin.loader，则需要使用MiniCssExtractPlugin
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash:8].css',
      chunkFilename: 'css/[name].[contenthash:8].chunk.css'
    })
  // ...
  ],
  
  // ...
}

设置了output.assetModuleFilename在assets目录下，然而线上的路径却为：

可以看到，线上的图片引入路径多了一个css目录，而打包出来的文件结构如下，图片资源确实是在assets目录下的：

引入的路径应该往上跳出一层目录，才能正确地访问到图片。

解决

后来找到了解决办法，在 webpack 配置文件中，使用MiniCssExtractPlugin.loader时，配置一个publicPath，让其向上跳出一层目录：

{ loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' } }

打包后的文件结构没有变化，线上的引入路径变为如下：

与打包的文件结构相符，正确引入了图片。

参考

mini-css-extract-plugin