Webpack（模块构建失败）

Posted 2023-02-22

【中文标题】Webpack（模块构建失败）

【英文标题】：Webpack (Module Build faild)

【发布时间】：2019-11-06 22:04:01

【问题描述】：

我的错误是：

“./src/index.js 中的错误 模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）： SyntaxError: D:/cource/React project/webpacktutorial/src/index.js: Unexpected token (7:16)"

我不知道为什么每次我这样做都会发生这个错误，这可能是 webpack 的问题， 我用css loader，babel loader或者很多loader，但是这个东西还是没解决。

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"
  

App.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"  />
        <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;

【问题讨论】：

请在此处粘贴您的 .babelrc 内容或 babel 配置

预设：["env", "react"]

【参考方案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']
        ]
   

【讨论】：

这东西行不通。再次出现上述错误。

【参考方案2】：

你可以试试我的 webpack 配置

module.exports = 
    module: 
        rules: [
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    
                        loader: "css-loader",
                        options: 
                            minimize: true,
                            sourceMap: true
                        
                    ,
                    
                        loader: "sass-loader"
                    
                ]
            ,
            
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: ["babel-loader", "eslint-loader"]
            ,
            
                test: /\.(jpe?g|png|gif)$/i,
                loader: "file-loader"
            ,
            
                test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
                loader: "file-loader"
            
        ]
    
;

完整配置可以查看here

我的 babel.rc

  "presets": ["es2015", "react"],
  "plugins": [
    "transform-es2015-destructuring",
    "transform-object-rest-spread",
    ["transform-class-properties",  "spec": true ]
  ]

我的 package.json 依赖项

"babel-cli": "6.26.0",
"babel-core": "6.26.3",
"babel-eslint": "8.2.6",
"babel-loader": "7.1.5",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-plugin-transform-es2015-destructuring": "6.23.0",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-preset-es2015": "6.24.1",
"babel-preset-react": "6.24.1",
"babel-preset-stage-0": "6.24.1"

【参考方案3】：

Source code

---

使用您的package.json 创建自己的存储库后，我能够复制您的确切错误。我能够修复错误：

“./src/index.js 中的错误 模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）： SyntaxError: D:/cource/React project/webpacktutorial/src/index.js: Unexpected token (7:16)"

通过在我的目录的根目录添加我自己的.babelrc。我的.babelrc 看起来像这样：

    "presets": ["env", "react"]

---

之后，我收到关于css-loader 的错误。为了解决这个问题，我做了：

npm i -D style-loader css-loader

获取包并向webpack.config.js添加另一个规则：

rules: [
    
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
    ,
    
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
    
]