Webpack 4的file-loader可用于字体文件，但无法用于图像文件。

Question

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

.png文件确实输出到dist/assets，但浏览器没有加载它。有趣的是，我在webpack.config.js文件中将我的.png文件与字体文件处理方式相同，而字体文件可以被浏览器加载。

以下是构建时我的文件目录：

以下是 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文件如下，或者可以在存储库中找到（以及其他文件），其中此代码托管。

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',
      })
    ]
}

- hyperupcall

Answer 1

我试了一下，只有一个小细节需要调整，其他都很好。

我认为真正的魔法在于wepback-dev-server如何找到你的index.html，如果有什么问题，我认为应该会出现。不管怎样：

你的构建（npm run prod --> webpack --mode production）创建了所有正确的文件，但是index.html没有变化，也没有在dist文件夹中生成index.html。通常情况下，你会从模板中复制index或生成它以进行缓存破坏（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 文件夹进行测试。

- ippi

---

好的，我的 index.html 文件应该包含在我的 /dist 中，这是有道理的。我会进行更改，使用 copy-webpack-plugin，并看看效果如何。谢谢！ - hyperupcall

我使用了copy-webpack-plugin，将我的index.html放在dist文件夹中。现在它运行得非常好。感谢您的帮助！ - hyperupcall