Question

我正在为我的反应应用程序使用webpack，dev和prod的两个配置。开发工作正常，但是当我使用prod启动快速服务器时，它会给我一个错误，即找不到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'],
    },
  ],
 },
};

我的package.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似乎没有得到它

项目目录：

Answer 1

Rei Dien给出的解决方案解决了这个问题！

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

1 个答案: