当前位置: 首页 > 知识库问答 >
问题:

./src/index.js模块分析失败中的错误:意外标记(13:16)您可能需要适当的加载程序来处理此文件类型

黄锋
2023-03-14

我在做“NPM运行构建”我的react应用程序时遇到了一个问题。其说法如下:

下面提到的错误:

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var webpack = require('webpack');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname+'/src/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry:[
        './src/index.js'
    ],

  module: {
    rules: [{
        test : /\.(js|jsx)$/, 
        include:__dirname+'/src/', 
        exclude: /node_modules/,
        loader: 'babel',
        query: {
            cacheDirectory:true,
            presets: ['es2015','react','stage-0']
        }
    }]
  },
  output: {
    //path: path.resolve(__dirname, '/dist'),
    filename: 'index_compiled.js',
    path: __dirname+'/dist'
  },
  mode: 'none',

  plugins: [HTMLWebpackPluginConfig]
};
import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './HelloWorld.jsx';

ReactDOM.render(<HelloWorld />, document.getElementById('root'));
<!DOCTYPE html>
<html lang = "en">

   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>

   <body>
      <div id = "root"></div>

   </body>

</html>

4)./src/helloworld.jsx

import {React,Component} from 'react';

class HelloWorld extends React.Component {
  render() {
     return(
      <div>Hello World !!</div>
     );
    }
};

export default HelloWorld;

5)package.json

{
  "name": "reacttuts",
  "version": "1.0.0",
  "description": "Creating React Apps V0.0.1",
  "main": "index.js",
  "scripts": {
    "build": "webpack -p"
  },
  "author": "Ashwini kumar",
  "license": "ISC",
  "dependencies": {
    "react": "^16.3.2",
    "react-dom": "^16.3.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "coffee-loader": "^0.9.0",
    "html-webpack-plugin": "^3.2.0",
    "react-hot-loader": "^4.1.2",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15"
  }
}

共有1个答案

秋飞鸾
2023-03-14

请尝试以下操作:

  1. 升级babels-webpack 4需要babel-loader 8.x babel 7.x
  2. 来自webpack文档:

在引用加载器时,不再可能省略-loader扩展

loader: 'babel',

loader: 'babel-loader',
 类似资料: