webpack-dev-server獲取空白屏幕

問候我第一次構建MERN堆棧並使用Webpack作爲構建工具。目標是讓Express提供的應用程序的API以及webpack-dev-server提供的靜態內容（我的靜態目錄）和捆綁包。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我得到了一個空白屏幕，但所有的網絡流量是好....我我失去了一些東西？

謝謝。

來源

2017-07-05 Angel Rodriguez

在你的'contentBase'目錄中，你有一個'index.html'文件，它包含腳本標籤給你的包和供應商文件嗎？看看[html-webpack-plugin]（https://github.com/jantimon/html-webpack-plugin） – Bulkan

是的，我喜歡。謝謝你的慰問。這兩個腳本都在我的身體標記內。 vendor.bundle.js然後是App.bundle.js。 –

不要爲contentBase使用絕對路徑。只要做'靜態'或'斌'或什麼的。您甚至不會看到創建的文件夾，因此無所謂 –

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

來源

2017-07-08 14:53:52

我的index.html文件位於靜態目錄中。這還不夠嗎？謝謝。 –

不適用於webpack-dev-server。只是重申該webpack開發服務器只是一個快速服務器的實例。這與其他服務器實例無關，如apache/nginx甚至文件系統。它只是複製你在一個包中使用的所有文件，並且允許你在http訪問它們。這就是全部 - 如果你的軟件包沒有文件引用，比webpack不存在。在webpack dev服務器中，不存在「靜態dicectory」之類的東西。 Webpack是一個模塊打包程序，它並不關心靜態任何東西。 –

如果你不想使用html-webpack-plugin，那麼考慮使用別的東西而不是模塊打包器。你可能想要使用例如。用webpack喝酒，或者也許用吞吐，或者其他什麼......但是html-webpack-plugin會做魔術。有沒有理由過分複雜這是如此以來.. –

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

來源

2017-07-08 15:01:10

手冊的HTML在這裏工作我把我的建立在原來的職位的頂部。謝謝！ –

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

來源

2017-07-28 14:21:21

webpack-dev-server獲取空白屏幕

回答

相關問題