webpack-dev-server獲取空白屏幕

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

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

Answer 2

檢查您的包是否正確構建，或者通過手動運行$ webpack來檢查它們，或者console中有錯誤/警告，如果存在構建錯誤並且JS無法加載/分析/執行。否則請檢查代理設置，或者如果可能的話刪除它們，通過手動添加一些HTML到您的index.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', 
};