引入React时Webpack不起作用

Webpack not working when React is introduced

本文关键字：不起作用 Webpack React 引入      更新时间：2023-09-26

我已经学习了webpack的主要教程，并且已经启动并运行了服务器。当我更改文件时，它会在保存时更新，一切都很好。然而，我后来介绍了React，结果一切都错了。

首先，我在浏览器中得到了这个错误：

Unexpected token <
You may need an appropriate loader to handle this file type.

这指向我的entry.js文件中的第4行：

var CommentBox = React.createClass({
  render: function() {
    return (
        <div className="commentBox">
          Hello, world! I am a CommentBox.
        </div>
    );
  }
});
ReactDOM.render(
    <CommentBox />,
    document.getElementById('content')
);

这是index.html

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <div id ="content"></div>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>

webpack.config.js:

module.exports = {
  entry: "./entry.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: /'.jsx?$/,
        loader: 'jsx-loader?insertPragma=React.DOM&harmony'
      }
    ]
  },
  externals: {
    'react': 'React'
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  }
};

如果我将entry.js文件更改为仅包含：

document.write(require("./content.js"));

它产生了我目前在content.js文件中的内容：

module.exports = "this is working";

因此，这与react/jsx等有关。有人对此有任何解决方案吗？我在网上看到过其他人提出这个问题，但到目前为止，给出的解决方案对我来说并不奏效。

Webpack和jsx-loader

webpack.config.js 

module.exports = {
  entry: './app.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /'.js/,
      loader: 'jsx-loader'
    }]
  }
}

app.js

var React = require('react');
var App = React.createClass({
  render: function() {
    return <h1>Hello World</h1>
  }
})
React.render(<App/>, document.getElementById('app'))

和带有<div> 的简单index.html文件

你可能想使用带有ES6语法的React（React webpack和babel），所以：我希望我的帖子对你有用。

更新：

正如FakeRainBrigand告诉jsx-loader是去复杂的，如果你想尝试使用babel加载程序而不是jsx-loader ，那就太好了

感谢

就像FakeRainBrigand说jsx-loader不推荐使用一样，如果你想转换es6或jsx，你可能会想使用babel-loader。由于Babel 6现在已经发布，您必须通过在.babelrc文件中设置"预设"来明确声明要执行的转换，如下所示：

$ npm install --save-dev babel-loader

$ npm install --save-dev babel-preset-es2015

$ npm install --save-dev babel-preset-react

{
  "presets": ["es2015","react"]
}

webpack.config.js

module: {
    loaders: [
        { test: /'.css$/, loader: "style!css" },
        { 
            test: /'.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['es2015']
            }
        },
        { 
            test: /'.jsx$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['react']
            }
        },             
    ]
},
相关文章：