问题
最近在重构博客时,遇到了一个问题。在生产模式下,使用的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: '../' } }
打包后的文件结构没有变化,线上的引入路径变为如下:
与打包的文件结构相符,正确引入了图片。