作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试通过运行一个基本程序来学习 ReactJS。
webpack.config.js
var config = {
entry: './main.js',
output: {
path: './',
filename: 'index.js'
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.experts = config;
package.json
{
"name": "reactapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"react": "^15.2.1",
"react-dom": "^15.2.1",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}
}
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
"Hello, world."
</div>
);
}
}
export default App;
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
index.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script type="text/javascript" src = "index.js"></script>
</body>
</html>
启动服务器时,我看到一个没有内容的空白页面。 HTML 页面在那里,但无法看到要通过 React 添加到 DOM 的部分。
index.js 设置为包含我们捆绑的应用程序的文件,但浏览器的控制台显示“无法加载资源 index.js(404)”错误。如果我将 HTML 中 script 标记的 src 属性更改为 main.js,我会收到带有 import 语句的语法错误。
我怀疑问题是没有正确地将 Babel 或其他一些依赖项与我的包链接起来。
最佳答案
webpack.config.js
中有拼写错误,必须是 exports
而不是 experts
module.exports = config;
^
在这种情况下,您不会从 webpack.config.js
导出配置,并且 webpack
不知道您的自定义配置并使用默认配置。
关于javascript - 无法使用 Babel 和 Webpack 在浏览器中加载 ReactJS 资源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38607113/
我是一名优秀的程序员,十分优秀!