使用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} />