Question

问候我第一次构建MERN堆栈并使用Webpack作为我的构建工具。目标是让Express提供应用程序的API和静态内容（我的静态目录）以及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

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

Answer 2

检查捆绑包是否构建正确，可以通过手动运行$ webpack检查它们，也可能console中有错误/警告，如果出现生成错误，可能会出现空白页并且JS无法加载/解析/执行。否则，请检查代理设置或尽可能将其删除，然后通过手动向index.html添加一些HTML进行检查。

Answer 3

感谢@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',
};

webpack-dev-server获取空白屏幕

3 个答案: