模块解析失败：您可能需要一个适当的加载器来处理此文件类型，当前没有配置任何加载器来处理此文件

Question

我正在做一个使用React的项目，我对React是个新手，没有特别的经验在Symfony中设置webpack配置文件。浏览器中出现以下错误：

             class App extends React.Component {
             >     _canvas = null
             |     _dimension = null
             |     _margin = 30

                module.exports = {
                  mode: 'development',
                  devtool: 'inline-sourcemap',
                  resolve: {
                    alias: {
                      BezierPlugin:'gsap/src/uncompressed/
                                    plugins/BezierPlugin',
                      ScrollToPlugin: 'gsap/src/uncompressed/
                                       plugins/ScrollToPlugin',
                      swiper: 'swiper/dist/js/swiper.min',
                    },
                  },
                  entry: {
                    app: ['./js/app.js'],
                  },
                  output: {
                    path: path.resolve(__dirname, `${assetsPath}/js- 
                    build`),
                    filename: '[name].bundle.js',
                  },
                  module: {
                    rules: [{
                        test: /\.html$/,
                        loader: 'html-loader',
                        options: {
                          attrs: false,
                        },
                    },
                    {
                        test: /\.jsx?$/, // Match both .js and .jsx files
                        exclude: /node_modules/,
                        loader: "babel-loader",
                        query: {
                          presets: ['es2015', 'react']
                        }
                     },
                   ],
                 },
                 plugins: [
                   new webpack.ProvidePlugin({
                     $: 'jquery',
                     jQuery: 'jquery',
                     'window.jQuery': 'jquery',
                   }),
                   new webpack.DllReferencePlugin({
                     context: __dirname,
                     manifest: path.resolve(__dirname, `${assetsPath}/js- 
                     build/manifest.bundle.json`),
                   }),
                  ],
                 };

Answer 1

确保您已经安装了es2015 babel预置。

npm install babel-preset-es2015

在webpack.config中配置babel-loader：

  { 
     test: /\.jsx?$/,         // Match both .js and .jsx files
     exclude: /node_modules/, 
     loader: "babel-loader", 
     query: {
       presets:['es2015', 'react']
     }
  },