Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/474.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在网页包生产配置中找不到Bundle.js_Javascript_Node.js_Reactjs_Express_Webpack - Fatal编程技术网

Javascript 在网页包生产配置中找不到Bundle.js

Javascript 在网页包生产配置中找不到Bundle.js,javascript,node.js,reactjs,express,webpack,Javascript,Node.js,Reactjs,Express,Webpack,我正在使用两种配置的webpack,我的react应用程序的dev和prod。dev工作正常,但当我使用prod启动express服务器时,它会给我一个错误,即未找到bundle.js,即使在运行build命令时,它会在dist文件夹中构建bundle.js 这是我的webpack.prod.js const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require(

我正在使用两种配置的webpack,我的react应用程序的dev和prod。dev工作正常,但当我使用prod启动express服务器时,它会给我一个错误,即未找到bundle.js,即使在运行build命令时,它会在dist文件夹中构建bundle.js

这是我的webpack.prod.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: 'source-map',
  entry: './app/app.js',
  output: {
    path: path.join(__dirname, '..', 'dist'),
  filename: 'bundle.js',
},
plugins: [
  new HtmlWebpackPlugin({
  template: 'app/index.html',
  inject: true,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeRedundantAttributes: true,
    useShortDoctype: true,
    removeEmptyAttributes: true,
    removeStyleLinkTypeAttributes: true,
    keepClosingSlash: true,
    minifyJS: true,
    minifyCSS: true,
    minifyURLs: true,
  },
}),
new webpack.DefinePlugin({
  'process.env': {
    NODE_ENV: JSON.stringify('production'),
  },
}),
new webpack.optimize.UglifyJsPlugin({
  minimize: true,
  compress: {
    warnings: false,
   },
 }),
],
module: {
  loaders: [
    {
      test: /.jsx?$/,
      loader: 'babel-loader',
      include: path.join(__dirname, '..', 'app'),
      exclude: /node_modules/,
      query: {
        presets: ['es2015', 'react'],
     },
    },
   {
     test: /\.html$/,
     loader: 'html-loader',
    },
    {
      test: /\.scss$/,
      loaders: ['style-loader', 'css-loader', 'sass-loader'],
    },
  ],
 },
};
mypackage.json文件

"scripts": {
    "start": "cross-env NODE_ENV=production node server",
    "dev": "cross-env NODE_ENV=development webpack-dev-server  --config ./webpack/webpack.dev.js --hot --inline",
    "build": "rm -rf dist && webpack --config ./webpack/webpack.prod.js --progress --colors",
    "test": "jest"
},
"dependencies": {
    "boostrap": "^1.0.0",
    "cross-env": "^4.0.0",
    "enzyme-to-json": "^1.5.1",
    "express": "^4.15.2",
    "react": "15.4.1",
    "react-dom": "15.4.1",
    "react-router": "3.0.0",
    "whatwg-fetch": "^2.0.3"
},
"devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-core": "^6.24.1",
    "babel-jest": "^19.0.0",
    "babel-loader": "^6.4.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "chai": "^3.5.0",
    "css-loader": "^0.28.0",
    "enzyme": "^2.8.2",
    "eslint": "^3.19.0",
    "eslint-config-airbnb": "^14.1.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^4.0.0",
    "eslint-plugin-react": "^6.10.3",
    "file-loader": "^0.11.1",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.28.0",
    "jest": "^19.0.2",
    "node-sass": "^4.5.2",
    "react-addons-test-utils": "^15.5.1",
    "react-hot-loader": "^1.3.1",
    "sass-loader": "^6.0.3",
    "sinon": "^2.1.0",
    "style-loader": "^0.16.1",
    "webpack": "^2.4.1",
    "webpack-dev-middleware": "^1.10.1",
    "webpack-dev-server": "^2.4.2",
    "webpack-hot-middleware": "^2.18.0"
}
正如您在下面的目录结构中所看到的,dist/bundle.js显然存在,但webpack/express似乎没有得到它

项目目录:


瑞丁给出的解决方案解决了这个问题

您需要设置express后端以将dist文件夹作为一项资产提供服务。您应该编辑此答案以包含解决方案(您仍然可以将积分归功于Rei Dien,但答案将更好地遵循此网站的格式)。