使用 webpack 构建反应时出错

Question

我正在使用 react.js 和 web pack。运行 NPM run build 命令时出现此错误，我正在学习如何使用 webpack 进行构建，所以我第一次尝试但收到此错误。请帮忙！

我从一些 webpack 教程网站编写了这段代码。

assets by status 1.05 KiB [cached] 2 assets
./src/index.js 796 bytes [built] [code generated] [1 error]

ERROR in ./src/index.js 13:2
Module parse failed: Unexpected token (13:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const ProviderComponent = ()=>{
|   return (
>   <Provider store={store} >
|       <App/>
|     </Provider>

webpack 5.65.0 compiled with 1 error in 901 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1

网页包文件

const port = process.env.PORT || 8080;
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
    output :{
        path:path.join(__dirname,'/dist'),
        filename:'main.[fullhash].js'
    },
    module:{
        rules:[{
            test:/\.(js|jsx)$/,
            exclude:/node_modules/,
        },
           {
                test: /\.less$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' },
                    { loader: 'less-loader' }
                ]
            },
        ]
        
    },
    resolve: 
    {
        mainFiles: ['index', 'Index'],
        extensions: ['.js', '.jsx','.css'],
        alias: {
            '@': path.resolve(__dirname, 'src'),
        }
    }, 
    plugins:[
      new HtmlWebPackPlugin({
      template:'./public/index.html'
      })
    ],

    devServer:{
        host:'localhost',
        port:port,
        historyApiFallback:true,
        open:true
    }
}

Answer 1

您的index.js 中有JSX，这不是标准的javascript。 Webpack 默认只能转译标准的 javascript，为了转译 JSX 这个 React 特性，你需要使用一些可以帮助 webpack 识别 JSX 语法的东西，webpack 把这个东西叫做loaders。

你可以使用不同的加载器，例如你应该使用babel-loader来告诉webpack如何理解JSX。

babel-loader 内部使用 Babel.js，这是一个用于将非标准 javascript 转换为标准 javascript 的库。

最好先熟悉 Babel.js，然后在 webpack 中使用。但是现在，您需要的是：

安装 babel (with preset-react) 和 babel-loader

npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react

将 babel 添加到你的 webpack js|jsx 文件规则

你可以像我在这里做的那样在 webpack 配置文件中设置 babel 选项，或者创建一个单独的文件来配置 babel 本身。你可以在Babel.js docs阅读更多关于它的信息。

...

module:{
        rules:[{
            test:/\.(js|jsx)$/,
            exclude:/node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env', "@babel/preset-react"]
                }
            }
        },

...