首页 文章

./src/index.js中的错误模块解析失败：意外的令牌（13:16）您可能需要一个合适的加载器来处理此文件类型

提问于
浏览 次
1

我在做'npm run build'我的反应应用程序时遇到了一个问题 . 其说法如下：

下面提到的错误：

./src/index.js中的错误模块解析失败：意外的令牌（13:16）您可能需要适当的加载程序来处理此文件类型 . | } | * / | ReactDOM.render（，document.getElementById（'root'））; @ multi ./src/index.js“index.html”的子html-webpack-plugin：

My Application consists of following Snippet and structure 1） webpack.config.js -

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]
};

2） ./src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './HelloWorld.jsx';

ReactDOM.render(<HelloWorld />, document.getElementById('root'));

3）./ SRC / index.html中**

<!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"
  }
}
reactjs webpack

1 回答

  • 0

    安装 babel-preset-stage-0

    npm i babel-preset-stage-0 -D

    你在webpack.config.js中调用它

    query: {
            cacheDirectory:true,
            presets: ['es2015','react','stage-0']
        }
    回复于

相关问题