Webpack 4 文件加载器适用于字体文件，但不适用于图像文件

Question

我正在尝试让 Webpack 4 将 .png 文件输出到 /dist/assets，并让我的 index.html 文件通过文件加载器使用它。

.png 文件会输出到 dist/assets，但它不会被浏览器加载。有趣的是，我将我的 .png 文件与 webpack.config.js 中的字体文件一样对待，并且字体文件由浏览器加载。

下面是我搭建时的文件目录

下面是来自 webpack.config.js 的代码，我认为它与此问题相关。

module.exports = {
  entry: "./src/index.js",
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js'
  },
   module: {
     rules: [
     ...
       {
          test: /\.(png|jpg|gif|eot|ttf|woff|woff2)$/,
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: './assets'
       }
     },
   ...

整个 webpack.config.js 在下面，或者可以在 repository 中找到（连同其他文件），此代码托管在

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: "./src/index.js",
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js',
      /*publicPath: 'dist'*/
  },
   module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['env']
            }
          }
        },
        {
         test: /\.vue$/,
         //exclude: /node_modules/,
         loader: 'vue-loader',
       },
       {
         test: /\.(sa|sc)ss$/,
         exclude: /node_modules/,
         use: [
           MiniCssExtractPlugin.loader,
           'css-loader',
           'sass-loader' // Loads a sass / scss file and compiles it to CSS
         ]
       },
       {
         test: /\.css$/,
         use: [
           MiniCssExtractPlugin.loader,
           'css-loader'
         ]
       },
        {
           test: /\.(png|jpg|gif|eot|ttf|woff|woff2)$/,
           loader: 'file-loader',
           options: {
             name: '[name].[ext]',
             outputPath: './assets'
           }
        },
        {
          test: /\.svg$/,
          use: [
            'vue-svg-icon-loader'
          ],
        }
      ]
   },
   resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js'
      },
      extensions: ['*', '.js', '.vue', '.json']
    },
    plugins: [
      new VueLoaderPlugin(),
      new MiniCssExtractPlugin({
        filename: 'bundle.css',
        chunckFilename: '[id].css',
      })
    ]
}

Answer 1

我试过了，只要有一个小细节就可以正常工作。

我认为这里真正的魔法是 wepback-dev-server 如何找到您的 index.html，如果有的话，我认为应该中断。不管怎样：

您的构建 (npm run prod --> webpack --mode production) 创建了所有正确的文件，但对 index.html 没有任何更改，也没有生成 index.html在你的 dist 文件夹中。通常你复制索引或从模板生成缓存清除（copy-webpack-plugin / html-webpack-plugin）但现在我只是手动复制 index.html 到 dist 文件夹。

当然现在索引指向了错误的资产所以我更新了：

from:   href="./dist/bundle.css"   and   src="./dist/bundle.js"
  to:   href="./bundle.css"        and   src="./bundle.js"

并且它立即起作用（使用 placeholder.png 和所有东西）。 dist 文件夹是您要服务的文件夹，因此请确保您的索引文件从那里运行，而不是从您的项目根目录运行。

我使用 http-server 从 dist 文件夹进行测试。

Webpack 4 文件加载器适用于字体文件，但不适用于图像文件

Webpack 4 file-loader works on font files, but not image files

javascript

webpack

webpack-4

webpack-file-loader