Webpack 文件加载器 publicPath答案

【问题标题】：Webpack file-loader publicPathWebpack 文件加载器 publicPath
【发布时间】：2018-02-01 13:04:30
【问题描述】：

我有一个 react 项目，我在其中使用 webpack 3.10.0 和文件加载器 1.1.6 将一些图像和 json 文件移动到我的分发文件夹中。

Webpack 按预期发出文件，但 react 接收到我的 json 和图像资产的错误 url

我的标记看起来像：

<img src="../images/helloworld_a49183cf48e4a0f12aa2124fe2ed9d3a.png" 
alt="Hello World!!">

但应该是：

<img src="/assets/images/helloworld_a49183cf48e4a0f12aa2124fe2ed9d3a.png" 
alt="Hello World!!">

我的文件夹结构如下所示： C:. ├───dist │ └───assets │ ├───css │ ├───data │ ├───images │ └───js ├───src │ ├───css │ ├───data │ ├───images │ └───js │ ├───actions │ ├───components │ ├───containers │ └───reducers └───tests

我认为文件加载器 publicPath 应该解决这个问题，但似乎我误解或我的配置有问题。有人能帮帮我吗？

webpack.config.js

var path = require('path');
const ExtractCSS = require("extract-text-webpack-plugin");

module.exports = {
  entry: [
    './src/js/index.js'
  ],
  output: {
    path: path.resolve(__dirname, 'dist/assets/js'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env','react']
          }
        }
      },
      {
        test: /\.scss$/,
        loader: ExtractCSS.extract('css-loader!sass-loader')
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name (file) {
                /*if (env === 'development') {
                  return '[path][name].[ext]'
              }*/
                return '[name]_[hash].[ext]'
              },
              publicPath: '/assets/images/',
              outputPath: '../images/'
            }  
          }
        ]
      },
      {
        test: /\.json$/,

        use: [
          {
            loader: 'file-loader',
            options: {
              name (file) {
                /*if (env === 'development') {
                  return '[path][name].[ext]'
              }*/
                return '[name].[ext]'
              },
              publicPath: '/assets/data/',
              outputPath: '../data/'
            }  
          }
        ]
      }
    ]
  },
  plugins: [
    new ExtractCSS('../css/app.css', {
        allChunks: true
    }) 
  ],
  resolve: {
    extensions: ['.js', '.jsx']
  },
  //devtool: 'eval-source-map',
  devServer: {
    historyApiFallback: true,
    contentBase: './dist/'
  }
};

【问题讨论】：

标签： reactjs webpack webpack-file-loader

【解决方案1】：

所以，而不是

{
    test: /\.(png|jpg|gif)$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name (file) {
            /*if (env === 'development') {
              return '[path][name].[ext]'
          }*/
            return '[name]_[hash].[ext]'
          },
          publicPath: '/assets/images/',
          outputPath: '../images/'
        }  
      }
    ]
  },

你可以试试

{
    test: /\.(png|jpg|gif)$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name (file) {
            /*if (env === 'development') {
              return '[path][name].[ext]'
          }*/
            return '[name]_[hash].[ext]'
          },
          publicPath: function(url) {
              return url.replace(../, '/assets/')
          },
        }  
      }
    ]
  },

【讨论】：

感谢您的建议。不幸的是，它没有用。在您的示例中，没有输出路径，因此文件最终将位于与我的包相同的目录中。我添加了输出路径，发出的文件最终位于正确的文件夹中。如果没有输出路径，img src 标签仍然反映了错误的路径。
我错误地将 url.replace 的第一个参数换成了引号。现在我已经删除了。可能这就是它不起作用的原因。无论如何，很高兴你现在得到了解决方案
谢谢，但你误解了我的意思。我仍然没有它的工作。如果您想尝试，我创建了一个 repo：github.com/mpriem/BrokenWebPack 非常感谢您的帮助！

【解决方案2】：

您还可以将输出对象配置为上一级，然后仅指定文件名：

  output: {
    path: path.resolve(__dirname, 'dist/assets'),
    filename: 'js/bundle.js'
  },

例如对于 json：

{
    test: /\.json$/,
    use: [
        {
            loader: 'file-loader',
            options: {
                name: 'data/[name].[ext]',
            }
      }
    ]
}

【讨论】：

谢谢！我要试一试。感觉就像一个解决方法:)。文件加载器不应该能够做我想做的事吗？
是的，但它可以满足您的需求。您指定了../images/，并且您的链接以../images/[...] 开头，所以它可以工作。
那么什么是 publicPath 呢？ AFAIK outputPath 应该驱动发出文件的 parh，并且 publicPath 应该返回到您的导入或包含函数。

【解决方案3】：

今天早上我的机器重启后，问题改变了？！！？（缓存问题？？！）......现在它不是忽略publicPath，而是将publicPath与outputPath连接起来。与此处解释的相同问题：https://github.com/webpack-contrib/file-loader/issues/228

恢复到 0.10.1 解决了我的问题。

感谢所有试图提供帮助的人！

【讨论】：