今天我正在设置我的第一个 Webpack Bebel React 项目，我在这里遇到了一些奇怪的情况。我不知道为什么，但我制作的每个组件都不能被 React 识别。我可以直接在检查器中看到它，而且它似乎没有被编译。所有标准 HTML 元素都会被渲染。即使我创建的组件的构造函数内部的 console.log 也不会被调用。我使用 webpack -p 运行热模式
这是我的 Webpack 配置:
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const webpack = require('webpack')
const path = require('path')
const isProduction = process.env.NODE_ENV === 'production'
const cssDeveloperLoaders = ['style-loader', 'css-loader', 'sass-loader']
const cssProduction = ExtractTextPlugin.extract({
fallback: 'style-loader',
loader: ['css-loader', 'sass-loader'],
publicPath: '/dist'
})
const cssConfig = isProduction ? cssProduction : cssDeveloperLoaders
module.exports = {
entry: {
app: './src/app.jsx'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.scss$/,
use: cssConfig
},
{
test: /\.jsx$/,
exclude: path.resolve(__dirname + '/node_modules/'),
use: 'babel-loader',
query: {
presents: ['es2015','react']
}
}
]
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
hot: true,
open: true,
openPage: '' //Fix to webpack version 3.0.0 after removing redirection to /undefined
},
plugins: [
new ExtractTextPlugin({
filename: 'app.css',
disable: !isProduction, //So if production is running it will generate file otherwise not
allChunks: true
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin()
]
}
我的.bablerc
{
"presets": [
"es2015",
"react"
]
}
App.jsx:
import './app.scss'
import React from 'react';
import { render } from 'react-dom';
import engine from './engine.jsx'
render(
<engine/>,
document.getElementById('root')
);
引擎.jsx
import React from 'react';
class engine extends React.Component{
constructor(){
super();
console.log('Component has been constructed ')
}
render(){
return(
<div>xD</div>
)
}
}
export default engine;
React Chrome 扩展的图片。
请注意，console.log 未被调用。
我的 html 是空的，我只看到引擎元素(未编译。)
关于这个问题有什么建议吗？
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="root"></div>
<script src="app.bundle.js"></script>
</body>
</html>
最佳答案
在您的 webpack 配置文件中添加
解决:{ 扩展名:[“.js”，“.jsx”] }
这样您就不需要导入带有扩展名的 jsx 文件。
引擎.jsx
class Engine extends React.Component{
constructor(){
super();
console.log('Component has been constructed ')
}
render(){
return(
<div>xD</div>
)
}
}
export default Engine;
App.jsx
import Engine from './engine'
render(
<Engine/>,
document.getElementById('root')
);
请验证https://codesandbox.io/s/D9rpvWWG6 也可以引用https://github.com/facebook/react/issues/4695
关于javascript - React 不渲染新组件，新的 webpack 设置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44911917/