Webpack 网页包&x2014；生成中缺少图像

我在使用Webpack 4时遇到问题。当我在开发模式下运行项目时，一切正常。但是当我构建它时，一些图像丢失了（

加载资源失败：net:：ERR_FILE_NOT_FOUND

）

我对图像的输出路径做了一些错误的处理，但我花了48小时试图弄清楚它是什么，但没有运气。。我希望有人能帮忙

这是我的

webpack.config.base.js

const path=require（'path'）；
const HtmlWebpackPlugin=require（'html-webpack-plugin'）；
const{getEntries}=require（'./utils.js'）；
const entries=getEntries（“./src/pages/”，“js”）；
常量配置={
条目：Object.assign（条目，{app:'./src/app.js'}），
输出：{
路径信息：错误，
path:path.resolve（_dirname，../dist'），
文件名：“js/[name].[hash:8].js'，
chunkFilename:'js/[name].chunk.[chunkhash:8].js',，
},
决心：{
别名：{
src:path.resolve（_dirname，../src'），
components:path.resolve（_dirname，“../src/components”），
},
},
模块：{
规则：[
{
测试：/\.js$/,，
排除：/node_模块/，
用法：['babel-loader']，
},
{
测试：/\.html$/,，
使用：[
{
加载器：“html加载器”，
选项：{
对,，
},
},
],
},
{
测试：/\（png | jpg | gif）（\？v=[0-9]\[0-9]\[0-9]）？$/，
使用：[
{
加载器：“url加载器”，
选项：{
限额：10000，
名称：'./assets/[name].[md5:hash:hex:8].[ext]',，
},
},
],
},
{
测试：/\（woff | woff2 | otf | ttf | eot）（\？v=[0-9]\[0-9]\[0-9]）？$/，
使用：[
{
加载器：“url加载器”，
选项：{
限额：10000，
名称：'./fonts/[name].[md5:hash:hex:8].[ext]'，
},
},
],
},
{
测试：/\（mp4 | ogg | svg）（\？v=[0-9]\[0-9]\[0-9]）？$/，
使用：[
{
加载器：“文件加载器”，
选项：{
名称：'assets/[name].[md5:hash:hex:8].[ext]'，
},
},
],
},
],
},
平行度：8，
优化：{
分割块：{
块：“全部”，
缓存组：{
公地：{
名称：'commons'，
块：'首字母'，
minChunks:2，
},
供应商：{
块：'首字母'，
名称：'供应商'，
测试：/node_modules\/，
minChunks:5，
优先事项：10，
},
默认值：{
minChunks:2，
优先次序：-20，
ReuseeExistingChunk:true，
},
},
},
},
插件：[]，
};
const pages=getEntries（'./src/pages/'，'html'）；
for（以页为单位的常量路径名）{
//配置为生成html文件、定义路径等。
常量配置={
文件名：`${pathname}.html`，//html输出路径名
模板：path.resolve（\uu dirname，`.${pages[pathname]}`），//模板路径
是的，
favicon:path.resolve（_dirname，'../src/assets/favicon.ico'），
区块：['commons'，'vendors'，'app'，pathname]，
ChunkstortMode:“手动”，
};
push（新的HtmlWebpackPlugin（conf））；
}
module.exports=config；

我的

webpack.config.prod.js

const path=require（'path'）；
const webpackMerge=require（'webpack-merge'）；
const MiniCssExtractPlugin=require（'mini-css-extract-plugin'）；
const CleanWebpackPlugin=require（'clean-webpack-plugin'）；
const optimizecssassetplugin=require（'optimize-css-assets-webpack-plugin'）；
const webpackConfigBase=require（'./webpack.config.base.js'）；
module.exports=webpackMerge（webpackConfigBase{
模块：{
规则：[
{
测试：/\（sa|sc|c）ss$/，
使用：[
MiniCssExtractPlugin.loader，
{loader:'css loader'，选项：{importLoaders:1}，
'邮政编码加载器'，
“sass loader”，
],
},
],
},
优化：{
minimizer:[新的OptimizeCSSAssetsPlugin（{}）]，
},
插件：[
新的MinicsSextract插件({
文件名：'css/[name].[hash:8].css'，
chunkFilename:'css/[id].[hash:8].css'，
}),
新的CleanWebpackPlugin（['dist']，{root:path.resolve（uu dirname，../'）}），
],
});

最后是我的webpack.config.dev.js

const path = require('path');
const webpackMerge = require('webpack-merge');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const portfinder = require('portfinder');
const webpackConfigBase = require('./webpack.config.base.js');

const webpackConfigDev = webpackMerge(webpackConfigBase, {
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          'postcss-loader',
          'sass-loader',
        ],
      },
    ],
  },
  devServer: {
    contentBase: path.resolve(__dirname, '../dist'),
    port: 8080,
    watchOptions: {
      poll: 1000,
    },
    stats: {
      children: false,
    },
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
      chunkFilename: 'css/[id].css',
    }),
  ],
});

module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = 8080;
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err);
    } else {
      webpackConfigDev.devServer.port = port;
      resolve(webpackConfigDev);
    }
  });
});

---

所以我发现这里出了什么问题。 我的

MiniCssExtractPlugin

文件名和chunkfilename有问题。我的图像输出路径实际上不是

dist/assets/myimage

，而是

dist/css/assets/myimage

，因此它在构建时查看了错误的文件夹

我根据以下内容对其进行了修改：

新的MinicsSextract插件({
文件名：'css/[name].[hash:8].css'，
chunkFilename:'css/[id].[hash:8].css'，
})

对此

新的MinicsSextract插件({
文件名：'[name].[hash:8].css',，
chunkFilename:'[id].[hash:8].css',，
}),