使用webpack时PNG不加载

Question

我是webpack的新手。

PNG文件未能在我的项目加载，有些SlickGrid插件的使用URL（）函数来加载PNG文件如下面给出的，

但我发现了在下面的错误我浏览器控制台，

这里是我的WebPack文件，

/* eslint-env node */ 

module.exports = { 
    context: __dirname + '/xyz/static', 
    entry: { 
    reactComponents: './bundle/components.js', 
    history: './js/history/index.js', 
    slickgrid: './bundle/slickgrid.js', 
    }, 
    output: { 
    libraryTarget: 'amd', 
    path: __dirname + '/xyz/static/js/generated', 
    filename: '[name].js', 
    }, 

    module: { 
    rules: [{ 
     test: /\.jsx?$/, 
     exclude: [/node_modules/, /vendor/], 
     use: { 
     loader: 'babel-loader', 
     options: { 
      presets: ['es2015', 'react'], 
     }, 
     }, 
    }, { 
     test: /\.css$/, 
     use: ['style-loader', 'raw-loader'], 
    }], 
    }, 

    resolve: { 
    extensions: ['.js', '.jsx'], 
    }, 
}; 

请让我知道我在这里错过了什么。

Answer 1

你需要使用一个url-loader在你的WebPack配置加载相似图片

module: { 
    rules: [{ 
     test: /\.jsx?$/, 
     exclude: [/node_modules/, /vendor/], 
     use: { 
     loader: 'babel-loader', 
     options: { 
      presets: ['es2015', 'react'], 
     }, 
     }, 
    }, { 
     test: /\.css$/, 
     use: ['style-loader', 'raw-loader'], 
    },{ 
      test: /\.(jpe?g|png|gif|svg)$/, 
      use:['url-loader'] 
     }], 
    } 

，然后在你的代码，你可以导入相似图片

import img from 'path/to/image.png'; 

，并用它作为源像

<img src={img} />