[英]Webpack and Reactjs app not loading html
I'm trying to build an app with reactjs+webpack+babel. 我正在尝试使用reactjs + webpack + babel构建一个应用程序。 My webpack.config.js is:
我的webpack.config.js是:
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'src/client/bin');
var APP_DIR = path.resolve(__dirname, 'src/client/app');
var config = {
context: APP_DIR,
entry: {
vendor: ['react', 'react-dom'],
app: APP_DIR + '/index.jsx'
},
resolve: {
extensions: [".webpack.js", ".web.js", ".js", ".jsx"]
},
output: {
path: BUILD_DIR,
filename: '[name].js'
},
devServer: {
inline:true,
port: 9000
},
module : {
loaders : [
{
test : /\.jsx?/,
exclude: /node_modules/,
include : APP_DIR,
loader : 'babel-loader',
query: {
presets: ['react', 'es2015']
}
}
]
}
};
module.exports = config;
Then my index.jsx is: 然后我的index.jsx是:
import React from 'react';
import {render} from 'react-dom';
class App extends React.Component {
render () {
return <p> Hello React!</p>;
}
}
render(<App/>, document.getElementById('app'));
And my html file: 和我的HTML文件:
<html>
<head>
<meta charset="utf-8">
<title>React.js using NPM, Babel6 and Webpack</title>
</head>
<body>
<div id="app"></div>
<script async src="bin/bundle.js" type="text/javascript"></script>
</body>
</html>
And this html is in the bin folder. 而且此html位于bin文件夹中。 What am I doing wrong, so when I open throw browser (and webpack server) I don't have that html.
我在做什么错,所以当我打开引发浏览器(和Webpack服务器)时,我没有那个html。
EDIT: 编辑:
{
"main": "index.jsx",
"scripts": {
"start": "webpack-dev-server --inline --hot",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "André Roque Nº31260",
"license": "ISC",
"dependencies": {
"react": "^0.14.9",
"react-dom": "^0.14.9",
"react-router": "^4.1.1",
"webpack": "^2.5.1"
},
"devDependencies": {
"babel-core": "^6.4.5",
"babel-loader": "^6.2.1",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"html-webpack-plugin": "^2.28.0",
"webpack": "^2.5.1"
}
}
Try serving the contentBase to the devServer from the folder in which the html file is present with you bundled script. 尝试从捆绑脚本所在的html文件所在的文件夹中将contentBase提供给devServer。 You should provide path to the webpack-dev-server such as following example:
您应该提供webpack-dev-server的路径,例如以下示例:
devServer: {
contentBase: path.resolve(__dirname, 'src/client/bin'),
inline:true,
port: 9000
},
Hope this helps. 希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.