每当我运行build命令时,我的图像文件都不会通过webpack添加到“ build”文件夹中。
在“开发”模式下,一切正常,但是当我将其部署为netlify时,所有图像均未显示。我尝试过使用“ write-file-wepback-plugin”仍然是同样的问题。
“ copy-webpack-plugin”也是如此,它仅将文件复制到build文件夹,并且在dev模式下,它工作正常,但在生产环境(托管版本)中则相反。 / p>
这是我下面的配置文件。
const HtmlWebpackPlugin = require("html-webpack-plugin")
const path = require("path")
module.exports = {
output: {
path: path.resolve(__dirname, "build"),
},
resolve: {
modules: [
'node_modules', 'src'
],
extensions: ['.jsx', '.js', '.scss']
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: ["babel-loader"],
exclude: /node_modules/
},
{
test: /\.s[ac]ss$/,
use: [
{
loader:"style-loader",
},
{
loader: "css-loader",
options: {
sourceMap: true
}
},
{
loader: "sass-loader",
options: {
sourceMap: true
}
}
]
},
{
test: /\.(png|svg|jpeg|gif|jpg)$/i,
loader: "file-loader",
options: {
name: 'assets/images/[name].[ext]',
limit: 1000,
outputPath: "assets/images"
}
},
{
test: /\.js$/,
enforce: 'pre',
use: ['source-map-loader'],
}
]
},
devServer: {
historyApiFallback: true,
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src", "index.html")
}),
new WriteFilePlugin({
test: /\.(png|jpeg|svg|gif|jpg)$/,
useHashIndex: true
})
],
optimization: {
splitChunks: {
chunks: "all"
}
}
}