在Webpack生产配置中找不到Bundle.js

Question

I am using two configuration for webpack, dev and prod for my react app. The dev works fine but when i use the prod to start an express server, it gives me an error that bundle.js is not found, even though when running the build command it builds the bundle.js in the dist folder.

Here's my 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'],
    },
  ],
 },
};

my package.json file

"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"
}

As you can see in the directory structure below, dist/bundle.js is clearly present but webpack/express doesn't seem to get it

project directory :

Answer 1

Rei Dien提供的解决方案解决了这个问题！