Webpack（模块生成失败d）

Question

我的错误是：

“./src/index.js中的错误
模块生成失败（来自./node_modules/babel-loader/lib/index.js):
语法错误：d：/cource/react project/webpacktutorial/src/index.js：意外标记（7:16）”

我不知道为什么这个错误发生每次我这样做可能的事情为webpack，我使用CSS加载器，巴贝尔加载器或许多加载器，但这个事情仍然没有解决。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

serviceWorker.unregister(); 

webpack.config.js

const path = require( 'path');

module.exports = {
    mode: 'none',
   entry: path.join(__dirname,  '/src/index.js'),
   output: {
       filename:  'App.js',
       path: path.join(__dirname,  '/dist')},
   module:{
       rules:[{
          test: /\.js$/,
          exclude: /node_modules/,
          loader:  "babel-loader",
       }]
   }
}

package.json

{
  "name": "webpacktutorial",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack --mode production",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "babel-core": "6.26.3",
    "babel-loader": "7.1.5",
    "babel-preset-env": "1.7.0",
    "babel-preset-react": "6.24.1",
    "html-webpack-plugin": "3.2.0",
    "react-hot-loader": "^4.11.1",
    "webpack": "4.16.2",
    "webpack-cli": "3.1.0",
    "webpack-dev-server": "3.1.5"
  }
}

应用程序JS

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Answer 1

试着用这个来改变你的模块部分，在我看来这是一个更稳定的选项：

const path = require( 'path');

module.exports = {
    mode: 'none',
   entry: path.join(__dirname,  '/src/index.js'),
   output: {
       filename:  'App.js',
       path: path.join(__dirname,  '/dist')},
   module:{
       loaders:[{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
            presets: ['es2015', 'react']
        }]
   }
}