Question

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

 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是一个空图像。很奇怪。

Answer 1

在上面的代码段中，引用的加载器似乎是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规则。

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

1 个答案: