Question

我在部署React应用程序时非常新，我遇到了问题。在本地，/ src / app / assets中的图像资源工作正常，但是当部署应用程序时，404 Not Found。我的研究得出结论，如果没有正确配置Webpack，这可能是一个常见问题，所以如果有人知道我在这里做错了什么，我会寻求帮助。

我的webpack.config.js：

var path = require('path');

var DIST_DIR = path.resolve(__dirname, 'dist');
var SRC_DIR = path.resolve(__dirname, 'src');

var config = {
  entry: SRC_DIR + '/app/index.js',
  output: {
    path: DIST_DIR + '/app',
    filename: 'bundle.js',
    publicPath: '/app/'
  },
  module: {
   loaders: [
    {
      test: /\.js?/,
      include: SRC_DIR,
      loader: 'babel-loader',
      query: {
        presets: ['react', 'es2015', 'stage-2']
      }
    },
    {
      test: /\.css$/,
      loader: "style-loader!css-loader"
    },
    {
      test: /\.png$/,
      loader: "url-loader?limit=100000"
    },
    {
      test: /\.jpg$/,
      loader: "file-loader"
    }
  ]
  }
};

module.exports = config;

我在package.json中有这些脚本：

"scripts": {
   "start": "npm run build",
   "build": "webpack -d && cp src/index.html dist/index.html && webpack-dev-server --content-base src/ --inline",
   "build:prod": "webpack -p && cp src/index.html dist/index.html"
 },

谢谢！

React app不会在生产中投放图像资源

0 个答案: