javascript - 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 没有任何变化，并且在您的 dist 文件夹中没有生成 index.html。通常你复制索引或从模板生成缓存破坏(copy-webpack-plugin/html-webpack-plugin)但现在我只是手动将 index.html 复制到 dist 文件夹。

当然现在索引指向了错误的 Assets 所以我更新了:

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

它立即起作用(使用 placeholder.png 和所有内容)。 dist 文件夹是您要提供的服务，因此请确保您的索引文件从那里工作，而不是从您的项目根目录工作。

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