为什么我的反应应用程序在webpack-dev-server编译后显示空白页面？
这是我的webpack.conf.js
var path = require('path');
var config = {
devServer: {
contentBase: "./public",
hot: true,
},
entry: path.resolve(__dirname, 'src') + '/index.js',
output:{
path: path.resolve(__dirname, 'public'),
filename:'driven.js'
},
module:{
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['react', 'es2015', 'stage-1']
}
},
{
test: /\.css$/,
loaders: ['style', 'css']
},
{
test: /\.png$/,
loader: "url-loader?limit=100000"
},
{
test: /\.jpg$/,
loader: "file-loader"
},
{
test: /\.(woff|woff2)(\?.*$|$)/,
loader: 'url?limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?.*$|$)/,
loader: 'url?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?.*$|$)/,
loader: 'file'
},
{
test: /\.otf(\?.*$|$)/,
loader: 'file'
},
{
test: /\.svg(\?.*$|$)/,
loader: 'url?limit=10000&mimetype=image/svg+xml'
},
{
test: /\.gif$/i,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
},
{
test: /\.json?$/,
loader: 'json'
}
]
}
}
module.exports = config;
这是我的package.json
{
"name": "react",
"version": "1.0.0",
"description": "Sample react application",
"main": "./src/index.js",
"dependencies": {
"babel-core": "^6.17.0",
"babel-loader": "^6.4.1",
"babel-plugin-add-module-exports": "^0.1.2",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.3.13",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.1",
"history": "^4.6.3",
"jquery": "^3.2.1",
"react-bootstrap": "^0.31.0",
"react-fb-like": "^0.4.5",
"react-router": "^3.0.5",
"react-toasts": "^1.0.6",
"react-scripts": "1.0.10",
"redux": "^3.7.2",
"file-loader": "^0.11.2",
"image-webpack-loader": "^3.3.1",
"css-loader": "^0.26.1",
"html-webpack-plugin": "^2.28.0",
"json-loader": "^0.5.4",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7"
},
"scripts": {
"start": "webpack-dev-server --hot ",
"react-start": "set PORT=3005 && node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"
},
"keywords": [
"React",
"Sample",
"For",
"MyApp"
],
"author": "Jasmel",
"license": "ISC",
"devDependencies": {
"babel-preset-stage-1": "^6.24.1",
"html-webpack-plugin": "^2.29.0"
}
}
这是我的文件夹结构
请帮助我知道这里发生了什么。我跑了npm start ..然后它显示了像这样成功编译的结果webpack，
D:\jasmel\react\webpacktest>npm start
> react@1.0.0 start D:\jasmel\react\webpacktest
> webpack-dev-server --hot
http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from ./public
Hash: c189d361086fdc8489c3
Version: webpack 1.15.0
Time: 4092ms
Asset Size Chunks Chunk Names
driven.js 808 kB 0 [emitted] main
chunk {0} driven.js (main) 748 kB [rendered]
[0] ./src/index.js 677 bytes {0} [built]
[1] ./~/react/react.js 56 bytes {0} [built]
[2] ./~/react/lib/React.js 5.08 kB {0} [built]
[3] ./~/process/browser.js 5.42 kB {0} [built]
[4] ./~/object-assign/index.js 2.11 kB {0} [built]
[5] ./~/react/lib/ReactBaseClasses.js 5.44 kB {0} [built]
[6] ./~/react/lib/reactProdInvariant.js 1.24 kB {0} [built]
[7] ./~/react/lib/ReactNoopUpdateQueue.js 3.36 kB {0} [built]
[8] ./~/fbjs/lib/warning.js 2.1 kB {0} [built]
[9] ./~/fbjs/lib/emptyFunction.js 1.08 kB {0} [built]
[10] ./~/react/lib/canDefineProperty.js 661 bytes {0} [built]
[11] ./~/fbjs/lib/emptyObject.js 458 bytes {0} [built]
[12] ./~/fbjs/lib/invariant.js 1.63 kB {0} [built]
[13] ./~/react/lib/lowPriorityWarning.js 2.16 kB {0} [built]
[14] ./~/react/lib/ReactChildren.js 6.19 kB {0} [built]
[15] ./~/react/lib/PooledClass.js 3.36 kB {0} [built]
[16] ./~/react/lib/ReactElement.js 11.2 kB {0} [built]
[17] ./~/react/lib/ReactCurrentOwner.js 621 bytes {0} [built]
[18] ./~/react/lib/ReactElementSymbol.js 622 bytes {0} [built]
[19] ./~/react/lib/traverseAllChildren.js 7.03 kB {0} [built]
[20] ./~/react/lib/getIteratorFn.js 1.12 kB {0} [built]
[21] ./~/react/lib/KeyEscapeUtils.js 1.29 kB {0} [built]
[22] ./~/react/lib/ReactDOMFactories.js 5.48 kB {0} [built]
[23] ./~/react/lib/ReactElementValidator.js 9.2 kB {0} [built]
[24] ./~/react/lib/ReactComponentTreeHook.js 11.8 kB {0} [built]
[25] ./~/react/lib/checkReactTypeSpec.js 4.19 kB {0} [built]
[26] ./~/react/lib/ReactPropTypeLocationNames.js 572 bytes {0} [built]
[27] ./~/react/lib/ReactPropTypesSecret.js 442 bytes {0} [built]
[28] ./~/react/lib/ReactPropTypes.js 500 bytes {0} [built]
[29] ./~/prop-types/factory.js 890 bytes {0} [built]
[30] ./~/prop-types/factoryWithTypeCheckers.js 18.6 kB {0} [built]
[31] ./~/prop-types/lib/ReactPropTypesSecret.js 436 bytes {0} [built]
[32] ./~/prop-types/checkPropTypes.js 2.94 kB {0} [built]
[33] ./~/react/lib/ReactVersion.js 350 bytes {0} [built]
[34] ./~/react/lib/createClass.js 688 bytes {0} [built]
[35] ./~/create-react-class/factory.js 28.4 kB {0} [built]
[36] ./~/react/lib/onlyChild.js 1.34 kB {0} [built]
[37] ./~/react-dom/index.js 59 bytes {0} [built]
[38] ./~/react-dom/lib/ReactDOM.js 5.17 kB {0} [built]
[39] ./~/react-dom/lib/ReactDOMComponentTree.js 6.27 kB {0} [built]
[40] ./~/react-dom/lib/reactProdInvariant.js 1.24 kB {0} [built]
[41] ./~/react-dom/lib/DOMProperty.js 8.24 kB {0} [built]
[42] ./~/react-dom/lib/ReactDOMComponentFlags.js 429 bytes {0} [built]
[43] ./~/react-dom/lib/ReactDefaultInjection.js 3.5 kB {0} [built]
[44] ./~/react-dom/lib/ARIADOMPropertyConfig.js 1.82 kB {0} [built]
[45] ./~/react-dom/lib/BeforeInputEventPlugin.js 13.3 kB {0} [built]
[46] ./~/react-dom/lib/EventPropagators.js 5.09 kB {0} [built]
[47] ./~/react-dom/lib/EventPluginHub.js 9.11 kB {0} [built]
[48] ./~/react-dom/lib/EventPluginRegistry.js 9.75 kB {0} [built]
[49] ./~/react-dom/lib/EventPluginUtils.js 7.95 kB {0} [built]
[50] ./~/react-dom/lib/ReactErrorUtils.js 2.19 kB {0} [built]
[51] ./~/react-dom/lib/accumulateInto.js 1.69 kB {0} [built]
[52] ./~/react-dom/lib/forEachAccumulated.js 855 bytes {0} [built]
[53] ./~/fbjs/lib/ExecutionEnvironment.js 1.06 kB {0} [built]
[54] ./~/react-dom/lib/FallbackCompositionState.js 2.43 kB {0} [built]
[55] ./~/react-dom/lib/PooledClass.js 3.36 kB {0} [built]
[56] ./~/react-dom/lib/getTextContentAccessor.js 955 bytes {0} [built]
[57] ./~/react-dom/lib/SyntheticCompositionEvent.js 1.1 kB {0} [built]
[58] ./~/react-dom/lib/SyntheticEvent.js 9.18 kB {0} [built]
[59] ./~/react-dom/lib/SyntheticInputEvent.js 1.09 kB {0} [built]
[60] ./~/react-dom/lib/ChangeEventPlugin.js 10.8 kB {0} [built]
[61] ./~/react-dom/lib/ReactUpdates.js 9.53 kB {0} [built]
[62] ./~/react-dom/lib/CallbackQueue.js 3.16 kB {0} [built]
[63] ./~/react-dom/lib/ReactFeatureFlags.js 628 bytes {0} [built]
[64] ./~/react-dom/lib/ReactReconciler.js 6.21 kB {0} [built]
[65] ./~/react-dom/lib/ReactRef.js 2.56 kB {0} [built]
[66] ./~/react-dom/lib/ReactOwner.js 3.53 kB {0} [built]
[67] ./~/react-dom/lib/ReactInstrumentation.js 601 bytes {0} [built]
[68] ./~/react-dom/lib/ReactDebugTool.js 11.7 kB {0} [built]
[69] ./~/react-dom/lib/ReactInvalidSetStateWarningHook.js 984 bytes {0} [built]
[70] ./~/react-dom/lib/ReactHostOperationHistoryHook.js 736 bytes {0} [built]
[71] ./~/fbjs/lib/performanceNow.js 845 bytes {0} [built]
[72] ./~/fbjs/lib/performance.js 588 bytes {0} [built]
[73] ./~/react-dom/lib/Transaction.js 9.55 kB {0} [built]
[74] ./~/react-dom/lib/inputValueTracking.js 3.1 kB {0} [built]
[75] ./~/react-dom/lib/getEventTarget.js 1.01 kB {0} [built]
[76] ./~/react-dom/lib/isEventSupported.js 1.94 kB {0} [built]
[77] ./~/react-dom/lib/isTextInputElement.js 1.02 kB {0} [built]
[78] ./~/react-dom/lib/DefaultEventPluginOrder.js 1.08 kB {0} [built]
[79] ./~/react-dom/lib/EnterLeaveEventPlugin.js 3.15 kB {0} [built]
[80] ./~/react-dom/lib/SyntheticMouseEvent.js 2.14 kB {0} [built]
[81] ./~/react-dom/lib/SyntheticUIEvent.js 1.57 kB {0} [built]
[82] ./~/react-dom/lib/ViewportMetrics.js 604 bytes {0} [built]
[83] ./~/react-dom/lib/getEventModifierState.js 1.23 kB {0} [built]
[84] ./~/react-dom/lib/HTMLDOMPropertyConfig.js 6.57 kB {0} [built]
[85] ./~/react-dom/lib/ReactComponentBrowserEnvironment.js 904 bytes {0} [built]
[86] ./~/react-dom/lib/DOMChildrenOperations.js 7.72 kB {0} [built]
[87] ./~/react-dom/lib/DOMLazyTree.js 3.71 kB {0} [built]
[88] ./~/react-dom/lib/DOMNamespaces.js 505 bytes {0} [built]
[89] ./~/react-dom/lib/setInnerHTML.js 3.86 kB {0} [built]
[90] ./~/react-dom/lib/createMicrosoftUnsafeLocalFunction.js 810 bytes {0} [built]
[91] ./~/react-dom/lib/setTextContent.js 1.45 kB {0} [built]
[92] ./~/react-dom/lib/escapeTextContentForBrowser.js 3.43 kB {0} [built]
[93] ./~/react-dom/lib/Danger.js 2.24 kB {0} [built]
[94] ./~/fbjs/lib/createNodesFromMarkup.js 2.66 kB {0} [built]
[95] ./~/fbjs/lib/createArrayFromMixed.js 4.11 kB {0} [built]
[96] ./~/fbjs/lib/getMarkupWrap.js 3.04 kB {0} [built]
[97] ./~/react-dom/lib/ReactDOMIDOperations.js 955 bytes {0} [built]
[98] ./~/react-dom/lib/ReactDOMComponent.js 38.9 kB {0} [built]
[99] ./~/react-dom/lib/AutoFocusUtils.js 599 bytes {0} [built]
[100] ./~/fbjs/lib/focusNode.js 704 bytes {0} [built]
[101] ./~/react-dom/lib/CSSPropertyOperations.js 7.2 kB {0} [built]
[102] ./~/react-dom/lib/CSSProperty.js 3.8 kB {0} [built]
[103] ./~/fbjs/lib/camelizeStyleName.js 1 kB {0} [built]
[104] ./~/fbjs/lib/camelize.js 708 bytes {0} [built]
[105] ./~/react-dom/lib/dangerousStyleValue.js 3.06 kB {0} [built]
[106] ./~/fbjs/lib/hyphenateStyleName.js 974 bytes {0} [built]
[107] ./~/fbjs/lib/hyphenate.js 800 bytes {0} [built]
[108] ./~/fbjs/lib/memoizeStringOnly.js 698 bytes {0} [built]
[109] ./~/react-dom/lib/DOMPropertyOperations.js 7.61 kB {0} [built]
[110] ./~/react-dom/lib/quoteAttributeValueForBrowser.js 700 bytes {0} [built]
[111] ./~/react-dom/lib/ReactBrowserEventEmitter.js 12.6 kB {0} [built]
[112] ./~/react-dom/lib/ReactEventEmitterMixin.js 958 bytes {0} [built]
[113] ./~/react-dom/lib/getVendorPrefixedEventName.js 2.87 kB {0} [built]
[114] ./~/react-dom/lib/ReactDOMInput.js 13.1 kB {0} [built]
[115] ./~/react-dom/lib/LinkedValueUtils.js 5.24 kB {0} [built]
[116] ./~/react-dom/lib/ReactPropTypesSecret.js 442 bytes {0} [built]
[117] ./~/react-dom/lib/ReactDOMOption.js 3.69 kB {0} [built]
[118] ./~/react-dom/lib/ReactDOMSelect.js 6.81 kB {0} [built]
[119] ./~/react-dom/lib/ReactDOMTextarea.js 6.46 kB {0} [built]
[120] ./~/react-dom/lib/ReactMultiChild.js 14.6 kB {0} [built]
[121] ./~/react-dom/lib/ReactComponentEnvironment.js 1.3 kB {0} [built]
[122] ./~/react-dom/lib/ReactInstanceMap.js 1.22 kB {0} [built]
[123] ./~/react-dom/lib/ReactChildReconciler.js 6.11 kB {0} [built]
[124] ./~/react-dom/lib/instantiateReactComponent.js 5.06 kB {0} [built]
[125] ./~/react-dom/lib/ReactCompositeComponent.js 35.2 kB {0} [built]
[126] ./~/react-dom/lib/ReactNodeTypes.js 1.02 kB {0} [built]
[127] ./~/react-dom/lib/checkReactTypeSpec.js 4.21 kB {0} [built]
[128] ./~/react-dom/lib/ReactPropTypeLocationNames.js 572 bytes {0} [built]
[129] ./~/fbjs/lib/shallowEqual.js 1.74 kB {0} [built]
[130] ./~/react-dom/lib/shouldUpdateReactComponent.js 1.4 kB {0} [built]
[131] ./~/react-dom/lib/ReactEmptyComponent.js 704 bytes {0} [built]
[132] ./~/react-dom/lib/ReactHostComponent.js 1.98 kB {0} [built]
[133] ./~/react/lib/getNextDebugID.js 437 bytes {0} [built]
[134] ./~/react-dom/lib/KeyEscapeUtils.js 1.29 kB {0} [built]
[135] ./~/react-dom/lib/traverseAllChildren.js 7.04 kB {0} [built]
[136] ./~/react-dom/lib/ReactElementSymbol.js 622 bytes {0} [built]
[137] ./~/react-dom/lib/getIteratorFn.js 1.12 kB {0} [built]
[138] ./~/react-dom/lib/flattenChildren.js 2.77 kB {0} [built]
[139] ./~/react-dom/lib/ReactServerRenderingTransaction.js 2.29 kB {0} [built]
[140] ./~/react-dom/lib/ReactServerUpdateQueue.js 4.83 kB {0} [built]
[141] ./~/react-dom/lib/ReactUpdateQueue.js 9.35 kB {0} [built]
[142] ./~/react-dom/lib/validateDOMNesting.js 13.7 kB {0} [built]
[143] ./~/react-dom/lib/ReactDOMEmptyComponent.js 1.9 kB {0} [built]
[144] ./~/react-dom/lib/ReactDOMTreeTraversal.js 3.72 kB {0} [built]
[145] ./~/react-dom/lib/ReactDOMTextComponent.js 5.81 kB {0} [built]
[146] ./~/react-dom/lib/ReactDefaultBatchingStrategy.js 1.88 kB {0} [built]
[147] ./~/react-dom/lib/ReactEventListener.js 5.3 kB {0} [built]
[148] ./~/fbjs/lib/EventListener.js 2.67 kB {0} [built]
[149] ./~/fbjs/lib/getUnboundedScrollPosition.js 1.12 kB {0} [built]
[150] ./~/react-dom/lib/ReactInjection.js 1.2 kB {0} [built]
[151] ./~/react-dom/lib/ReactReconcileTransaction.js 5.26 kB {0} [built]
[152] ./~/react-dom/lib/ReactInputSelection.js 4.27 kB {0} [built]
[153] ./~/react-dom/lib/ReactDOMSelection.js 6.78 kB {0} [built]
[154] ./~/react-dom/lib/getNodeForCharacterOffset.js 1.62 kB {0} [built]
[155] ./~/fbjs/lib/containsNode.js 1.05 kB {0} [built]
[156] ./~/fbjs/lib/isTextNode.js 605 bytes {0} [built]
[157] ./~/fbjs/lib/isNode.js 828 bytes {0} [built]
[158] ./~/fbjs/lib/getActiveElement.js 1.04 kB {0} [built]
[159] ./~/react-dom/lib/SVGDOMPropertyConfig.js 7.32 kB {0} [built]
[160] ./~/react-dom/lib/SelectEventPlugin.js 6.06 kB {0} [built]
[161] ./~/react-dom/lib/SimpleEventPlugin.js 7.97 kB {0} [built]
[162] ./~/react-dom/lib/SyntheticAnimationEvent.js 1.21 kB {0} [built]
[163] ./~/react-dom/lib/SyntheticClipboardEvent.js 1.17 kB {0} [built]
[164] ./~/react-dom/lib/SyntheticFocusEvent.js 1.07 kB {0} [built]
[165] ./~/react-dom/lib/SyntheticKeyboardEvent.js 2.71 kB {0} [built]
[166] ./~/react-dom/lib/getEventCharCode.js 1.5 kB {0} [built]
[167] ./~/react-dom/lib/getEventKey.js 2.87 kB {0} [built]
[168] ./~/react-dom/lib/SyntheticDragEvent.js 1.07 kB {0} [built]
[169] ./~/react-dom/lib/SyntheticTouchEvent.js 1.28 kB {0} [built]
[170] ./~/react-dom/lib/SyntheticTransitionEvent.js 1.23 kB {0} [built]
[171] ./~/react-dom/lib/SyntheticWheelEvent.js 1.92 kB {0} [built]
[172] ./~/react-dom/lib/ReactMount.js 25.5 kB {0} [built]
[173] ./~/react-dom/lib/ReactDOMContainerInfo.js 967 bytes {0} [built]
[174] ./~/react-dom/lib/ReactDOMFeatureFlags.js 439 bytes {0} [built]
[175] ./~/react-dom/lib/ReactMarkupChecksum.js 1.47 kB {0} [built]
[176] ./~/react-dom/lib/adler32.js 1.19 kB {0} [built]
[177] ./~/react-dom/lib/ReactVersion.js 350 bytes {0} [built]
[178] ./~/react-dom/lib/findDOMNode.js 2.46 kB {0} [built]
[179] ./~/react-dom/lib/getHostComponentFromComposite.js 740 bytes {0} [built]
[180] ./~/react-dom/lib/renderSubtreeIntoContainer.js 422 bytes {0} [built]
[181] ./~/react-dom/lib/ReactDOMUnknownPropertyHook.js 4.32 kB {0} [built]
[182] ./~/react-dom/lib/ReactDOMNullInputValuePropHook.js 1.37 kB {0} [built]
[183] ./~/react-dom/lib/ReactDOMInvalidARIAHook.js 3.14 kB {0} [built]
[184] ./src/index.css 899 bytes {0} [built]
[185] ./~/css-loader!./src/index.css 222 bytes {0} [built]
[186] ./~/css-loader/lib/css-base.js 1.46 kB {0} [built]
[187] ./~/style-loader/addStyles.js 6.91 kB {0} [built]
[188] ./src/App.js 2.92 kB {0} [built]
[189] ./src/logo.svg 3.61 kB {0} [built]
[190] ./src/App.css 893 bytes {0} [built]
[191] ./~/css-loader!./src/App.css 519 bytes {0} [built]
[192] ./src/registerServiceWorker.js 4.03 kB {0} [built]
webpack: Compiled successfully.
当我启动浏览器 localhost：8080 时显示空白页。控制台中没有错误。 当我在 root Div之后在index.html中添加了一些文本时，它会在浏览器中显示。 为什么我的js不在根div中渲染？任何帮助将不胜感激。我很新的反应和webpack.Thanks提前。
1 个答案:
答案 0 :(得分：1)
读出你配置webpack的方式：我看到输出被称为driven.js，你的服务静态资产是/public。
尝试点击网址driven.js或public/driven.js。并查看您是否能够访问您的捆绑包。
确定捆绑包位置后，请确保在index.html中包含了包含此文件的脚本标记。
相关问题
- 为什么React Webpack生产版本显示空白页面？
- Webpack-dev-server显示目录列表而不是应用页面
- 为什么使用Webpack-dev-server启动React App返回了我的目录结构
- 为什么我的反应应用程序在webpack-dev-server编译后显示空白页面？
- 为什么React需要运行webpack-dev-server？
- 反应应用程序显示空白页
- 简单的Vue应用仅显示空白页面（webpack-dev-server）
- 为什么我可以在React应用程序中使用react-data-picker？
- 应用构建后，React显示空白页面吗？
- 使用webpack对节点模块进行代码拆分后，为什么浏览器显示空白页？
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？