代码之家 › 专栏 › 技术社区 › Murtuza Z

使用网页包时不加载PNG

webpack reactjs node.js

Murtuza Z · 技术社区 · 7 年前

我是新来的网页包。

但我的浏览器控制台出现以下错误,

这是我的网页文件,

/* 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'],
  },
};

请让我知道我错过了什么。

1 回复 | 直到 7 年前

Shubham Khatri 7 年前

你需要利用 url-loader 在您的网页配置中加载图像,如

 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']
        }],
  }