我正在尝试将 Nextjs 应用程序从 Webpack 4 升级到 Webpack 5。
目前我使用file-loader
使用 next.config.js 中的选项:
// next.config.js
module.exports = {
module: {
rules: [
{
test: /\.(jpe?g|png|svg|gif|ico|eot|ttf|woff|woff2|mp4|pdf|webm|txt)$/,
use: [
{
loader: 'file-loader',
options: {
context: '',
outputPath: 'static',
publicPath: '_next/static',
name: '[path][name].[hash].[ext]',
}
},
]
},
]
}
};
根据资产模块 https://webpack.js.org/guides/asset-modules/我应该改变的指示file-loader
into type: 'asset/resource'
。我想知道怎样才能满足options
用于file-loader
。如何设置公共和文件系统路径和文件名?
我尝试过使用output
and generator.filename
配置,但我完全不知道应该将 Next.js 的公共路径和文件系统路径放在哪里:
module.exports = {
output: {
filename: '[path][name].[hash].[ext]',
path: path.resolve(__dirname, 'static')
},
module: {
rules: [
{
test: /\.(jpe?g|png|svg|gif|ico|eot|ttf|woff|woff2|mp4|pdf|webm|txt)$/,
type: 'asset/resource',
generator: {
filename: '_next/static/[path][name].[hash].[ext]'
}
},
]
}
};
Answer
这对我有用。
// next.config.js
module.exports = {
webpack: (config, options) => {
config.module.rules.push( {
test: /\.(jpe?g|png|svg|gif|ico|eot|ttf|woff|woff2|mp4|pdf|webm)$/,
type: 'asset',
generator: {
filename: 'static/chunks/[path][name].[hash][ext]'
},
});
return config;
}
};