javascript - webpack-dev-server get blank screen

Greetings I'm building a MERN stack for the first time and using Webpack as my build tool. The goal is to have the API's of the app served by Express and the static content(my static dir) and bundles served by 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',
                }
            }
        }

    };

When I open port: 8000 I get a blank screen but all the network traffic is good.... I'm I missing something?

Thank you.

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',
                }
            }
        }

    };

When I open port: 8000 I get a blank screen but all the network traffic is good.... I'm I missing something?

Thank you.

Share Improve this question edited Jul 8, 2017 at 20:39 asked Jul 5, 2017 at 23:19 Angel Rodriguez 211 gold badge1 silver badge6 bronze badges

In your contentBase directory do you have an index.html file that has script tags to your bundle and vendor files ? Have a look at html-webpack-plugin – Bulkan Commented Jul 5, 2017 at 23:56
yes I do. thank you for asking. the two scripts are inside my body tags. The vendor.bundle.js and then the App.bundle.js. – Angel Rodriguez Commented Jul 8, 2017 at 2:20
Dont use an absolute path for the contentBase. Just do 'static' or 'bin' or something. You won't even see the folder created so it doesn't matter – Mitch Talmadge Commented Jul 8, 2017 at 16:08
Thank you I changed it back to 'static' . Maybe I read the it wrong but the Docs said that was the remended way. – Angel Rodriguez Commented Jul 8, 2017 at 20:10

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

You need to add an index.html to your webpak config, so it can work with it. Try to use html-webpack-plugin and/or html-loader.

thanks to @robbieprevost for the assist. This new configuration worked for me:

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

Check if your bundles are build correctly, either by inspecting them manually running $ webpack or maybe there are errors/warnings in the console, it's likely to get a blank page in case there are build errors and the JS fails to load/parse/execute. Otherwise check the proxy settings or remove them if possible, check them by adding some HTML to your index.html manually.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - webpack-dev-server get blank screen - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)