Webpack 文件加载器输出空的 png 图像答案

【问题标题】：Webpack file loader outputs empty png imagesWebpack 文件加载器输出空的 png 图像
【发布时间】：2017-03-20 07:21:36
【问题描述】：

当我尝试使用文件加载器时遇到了一个非常奇怪的问题。

 var sunTextureUrl = require("file?name=picture.png!../textures/flare.png");
 console.log(sunTextureUrl);

我的配置是这样的

    output: {
        path: path.resolve(__dirname, 'assets'),
        publicPath: "/assets/",
        filename: "[name].js"
    },
    module: {
        loaders: [
            {test: /\.(gif|png|jpe?g|svg)$/i, loader: 'file'},
            {test: /\.glsl$/, loader: 'webpack-glsl'},
            {test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", query: {
              presets: ['es2015']
            }}
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({name: 'vendors', filename: "vendors.js"}),
        new webpack.optimize.UglifyJsPlugin(minifiedOpt),
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify(opt.production ? 'production' : 'development')
            }
        }),
        new webpack.ProvidePlugin({
          THREE: 'three'
        })
    ]

我得到以下输出：

                               Asset      Size  Chunks             Chunk Names
c8510617bc54cb2c5b707a4dfdb98337.png   13.2 kB          [emitted]
                         picture.png  82 bytes          [emitted]
                             main.js   12.5 kB       0  [emitted]  main
                          vendors.js    491 kB       1  [emitted]  vendors

在浏览器中，console.log 给了我

/assets/picture.png

所以基本上，webpack 将一个图像解析为两个。以哈希为名称的是我想要的图像，而picture.png是一个空图像。很奇怪。

【问题讨论】：

似乎是块问题，通过块插件
嗨，我在上面的代码中添加了我的插件。我尝试注释掉块插件以及所有插件。它仍然提供相同的东西。
嘿@Flmhdfj，我面临同样的问题。你找到解决方法了吗？

标签： node.js webpack

【解决方案1】：

在您上面的 sn-p 中，引用的加载程序似乎是 file。不应该是file-loader吗？

{ test: /\.(gif|png|jpe?g|svg)$/i, loader: 'file-loader' },

FWIW，就我而言，我有两条相互冲突的规则：

{
  test: /\.(png|jpe?g|gif)$/i,
  use: [
    {
      loader: 'file-loader',
    },
  ],
},
{
  test: /\.(png|jpe?g|gif|svg)$/i,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8192,
      },
    },
  ],
},

上面的file-loader 是多余的，因为url-loader 将回退到file-loader 超出限制。所以我删除了file-loader 规则。

【讨论】：