无法使用Babel和Webpack在浏览器中加载ReactJS资源

Question

I'm trying to learn ReactJS by running a basic program. 我正在尝试通过运行一个基本程序来学习ReactJS。

webpack.config.js 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 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 App.jsx

import React from 'react';

class App extends React.Component   {
    render()    {
    return  (
    <div>
        "Hello, world."
    </div>
    );
    }
}

export default App;

main.js main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

index.html 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>

On starting the server, I see an empty page with no contents. 启动服务器时，我看到一个没有内容的空白页面。 The HTML page is there but the part which is to be added to the DOM by React can't be seen. HTML页面在那里，但是看不到要由React添加到DOM的部分。

index.js is set as the file which will contain our bundled app but the browser's console shows 'Faile to load resource index.js(404)' error. index.js设置为将包含我们捆绑的应用程序的文件，但是浏览器的控制台显示“无法加载资源index.js（404）”错误。 If I change the src attribute of script tag in HTML to main.js, I get a SyntaxError with the import statement. 如果我将HTML中的script标记的src属性更改为main.js，则会出现带有import语句的SyntaxError。

I suspect the problem is with not correctly linking Babel or some other dependency with my package. 我怀疑问题出在与Babel或其他软件包的链接不正确。

Answer 1

Inside webpack.config.js there is typo, must be exports instead of experts 在webpack.config.js里面有错别字，必须是exports而不是experts

module.exports = config;
          ^

in this case you don't export config from webpack.config.js , and webpack doesn't know about your custom configuration and uses default config. 在这种情况下，您不会从webpack.config.js导出配置，并且webpack不知道您的自定义配置，而是使用默认配置。

Answer 2

I think the webpack.config.js will be like 我认为webpack.config.js会像

devtool: 'eval',
entry: './src/index',
output: {
  path: path.join(__dirname, 'dist'),
  filename: 'bundle.js',
  publicPath: '/static/',
},
module: {
  loaders: [{
    test: /\.js$/,
    loaders: ['babel'],
    exclude: /node_modules/,
    include: __dirname,
  }],
}

and the <script> 和<script>

<script type="text/javascript" src = "/static/bundle.js"></script>

无法使用Babel和Webpack在浏览器中加载ReactJS资源

问题描述

2 个解决方案

解决方案1
1 2016-07-27 08:43:03

解决方案2
0 2016-07-27 09:16:22

无法使用Babel和Webpack在浏览器中加载ReactJS资源

问题描述

2 个解决方案

解决方案1 1 2016-07-27 08:43:03

解决方案2 0 2016-07-27 09:16:22

解决方案1
1 2016-07-27 08:43:03

解决方案2
0 2016-07-27 09:16:22