webpack-dev-server 出现黑屏

Question

问候我第一次构建 MERN 堆栈并使用 Webpack 作为我的构建工具。目标是让应用程序的 API 由 Express 提供服务，静态内容（我的静态目录）和捆绑包由 webpack-dev-server 提供服务。

Here is my build:
Project is running at http://localhost:8000/
webpack output is served from /
Content not from webpack is served from static
Hash: 0f82642b68722fddb0c7
Version: webpack 3.1.0
Time: 3941ms
           Asset     Size  Chunks                    Chunk Names
   app.bundle.js  15.4 kB       0  [emitted]         app
vendor.bundle.js  1.35 MB       1  [emitted]  [big]  vendor
  [10] (webpack)/buildin/global.js 509 bytes {1} [built]
  [80] ./node_modules/react/react.js 56 bytes {1} [built]
 [153] (webpack)-dev-server/client?http://localhost:8000 5.59 kB {1} [built]
 [171] (webpack)/hot/dev-server.js 1.61 kB {1} [built]
 [173] ./node_modules/babel-polyfill/lib/index.js 833 bytes {1} [built]
 [209] ./node_modules/react-dom/index.js 59 bytes {1} [built]
 [235] ./node_modules/whatwg-fetch/fetch.js 12.7 kB {1} [built]
 [236] multi (webpack)-dev-server/client?http://localhost:8000 webpack/hot/dev-server ./src/App.jsx 52 bytes {0} [built]
 [237] ./node_modules/url/url.js 23.3 kB {1} [built]
 [243] ./node_modules/strip-ansi/index.js 161 bytes {1} [built]
 [245] (webpack)-dev-server/client/socket.js 856 bytes {1} [built]
 [284] ./src/App.jsx 655 bytes {0} [built]
 [482] ./node_modules/react-dom/lib/ReactDOM.js 5.17 kB {1} [built]
 [567] ./src/IssueList.jsx 8.32 kB {0} [built]
 [570] multi (webpack)-dev-server/client?http://localhost:8000 webpack/hot/dev-server react react-dom whatwg-fetch babel-polyfill 88 bytes {1} [built]
    + 556 hidden modules
webpack: Compiled successfully.


My dependencies:
"dependencies": {
    "body-parser": "^1.17.2",
    "express": "^4.15.3",
    "mongodb": "^2.2.29"
  },
"devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "nodemon": "^1.11.0",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "webpack": "^3.0.0",
    "webpack-dev-server": "^2.5.1",
    "whatwg-fetch": "^2.0.3"
  }


My webpack.config.js file:

    const webpack = require('webpack');
    const path = require('path');


    module.exports = {
        entry: {
            app: './src/App.jsx',
            vendor:['react', 'react-dom', 'whatwg-fetch'],
        },
        output: {
            path: path.resolve(__dirname, './static'),
            filename: "app.bundle.js"
        },
        plugins: [
          new webpack.optimize.CommonsChunkPlugin({name: 'vendor',filename: 'vendor.bundle.js'})
        ],
        module: {
            rules:[
                {
                    test:/\.jsx$/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['react','es2015']
                        }
                    }
                },
            ]
        },

        devServer:{
            port: 8000,
                contentBase: '/Users/Angel/WebstormProjects/myMern/static',
                proxy: {
                '/api/*':{
                    target: 'http://localhost:3000',
                }
            }
        }

    };

当我打开端口：8000 时，我得到一个空白屏幕，但所有网络流量都很好......我错过了什么吗？

谢谢。

Answer 1

您需要将 index.html 添加到您的 webpak 配置中，以便它可以使用它。尝试使用html-webpack-plugin 和/或 html-loader。

Answer 2

感谢@robbieprevost 的协助。这个新配置对我有用：

const webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: {
    app: './src/App.jsx',
    vendor: ['react', 'react-dom', 'whatwg-fetch', 'babel-polyfill', 'react-router'],
  },
  output: {
    path: path.join(__dirname, './static'),
    filename: '[name].bundle.js',
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['app', 'vendor'],
      minChunks: Infinity,
    }),
  ],
  module: {
    rules: [
      {
        test: /\.jsx$/,
        use: {
          loader: 'babel-loader',
          query: {
            presets: ['react', 'es2015'],
          },
        },
      },
    ],
  },
  devServer: {
    port: 8000,
    contentBase: 'static',
    proxy: {
      '/api/*': {
        target: 'http://localhost:3000',
      },
    },
    historyApiFallback: true,
  },
  devtool: 'source-map',
};

Answer 3

检查您的捆绑包是否正确构建，通过手动检查它们运行$ webpack 或者console 中可能存在错误/警告，如果存在构建错误并且 JS 失败，则可能会出现空白页加载/解析/执行。否则检查代理设置或尽可能删除它们，通过手动将一些 HTML 添加到您的 index.html 来检查它们。