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获取空白屏幕

回答

相关问题