我在使用Webpack 4时遇到问题。当我在开发模式下运行项目时，一切正常。但是当我构建它时，一些图像丢失了（Failed to load resource: 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');

const config = {
  entry: Object.assign(entries,{ app: './src/app.js' }),output: {
    pathinfo: false,path: path.resolve(__dirname,'../dist'),filename: 'js/[name].[hash:8].js',chunkFilename: 'js/[name].chunk.[chunkhash:8].js',},resolve: {
    alias: {
      src: path.resolve(__dirname,'../src'),components: path.resolve(__dirname,'../src/components'),module: {
    rules: [
      {
        test: /\.js$/,exclude: /node_modules/,use: ['babel-loader'],{
        test: /\.html$/,use: [
          {
            loader: 'html-loader',options: {
              minimize: true,],{
        test: /\.(png|jpg|gif)(\?v=[0-9]\.[0-9]\.[0-9])?$/,use: [
          {
            loader: 'url-loader',options: {
              limit: 10000,name: './assets/[name].[md5:hash:hex:8].[ext]',{
        test: /\.(woff|woff2|otf|ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,name: './fonts/[name].[md5:hash:hex:8].[ext]',{
        test: /\.(mp4|ogg|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,use: [
          {
            loader: 'file-loader',options: {
              name: 'assets/[name].[md5:hash:hex:8].[ext]',parallelism: 8,optimization: {
    splitChunks: {
      chunks: 'all',cacheGroups: {
        commons: {
          name: 'commons',chunks: 'initial',minChunks: 2,vendors: {
          chunks: 'initial',name: 'vendors',test: /node_modules\//,minChunks: 5,priority: 10,default: {
          minChunks: 2,priority: -20,reuseExistingChunk: true,plugins: [],};

const pages = getEntries('./src/pages/','html');

for (const pathname in pages) {
  // Configured to generate the html file,define paths,etc.
  const conf = {
    filename: `${pathname}.html`,// html output pathname
    template: path.resolve(__dirname,`.${pages[pathname]}`),// Template path
    inject: true,favicon: path.resolve(__dirname,'../src/assets/favicon.ico'),chunks: ['commons','vendors','app',pathname],chunksSortMode: 'manual',};
  config.plugins.push(new 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 OptimizeCSSAssetsplugin = require('optimize-css-assets-webpack-plugin');
const webpackConfigBase = require('./webpack.config.base.js');

module.exports = webpackMerge(webpackConfigBase,{
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,use: [
          MiniCssExtractPlugin.loader,{ loader: 'css-loader',options: { importLoaders: 1 } },'postcss-loader','sass-loader',optimization: {
    minimizer: [new OptimizeCSSAssetsplugin({})],plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].[hash:8].css',chunkFilename: 'css/[id].[hash:8].css',}),new CleanWebpackPlugin(['dist'],{ root: path.resolve(__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,use: [
          'style-loader',devserver: {
    contentBase: path.resolve(__dirname,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);
    }
  });
});