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文件夹。

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

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文件加载器适用于字体文件，但不适用于图像文件

1 个答案: