Question

注意：我通读了其他类似的问题（here 和其他），但它们都是关于早期版本的 webpack 和 babel，并没有解决以下问题。

这很好，但是当我运行 npm run build 时，我收到以下错误。我该如何解决这个问题？（我怎样才能得到比这更好的错误？，日志也一样糟糕）。

> react_01@1.0.0 build /Users/monkeydo/Documents/code/__tests/react_01
> webpack --mode production

/Users/monkeydo/Documents/code/__tests/react_01/node_modules/webpack-cli/bin/cli.js:41
                )} manually.`,
                ^

SyntaxError: Unexpected token )
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:549:28)
    at Object.Module._extensions..js (module.js:586:10)
    at Module.load (module.js:494:32)
    at tryModuleLoad (module.js:453:12)
    at Function.Module._load (module.js:445:3)
    at Module.require (module.js:504:17)
    at require (internal/module.js:20:19)
    at runCli (/Users/monkeydo/Documents/code/__tests/react_01/node_modules/webpack/bin/webpack.js:69:2)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react_01@1.0.0 build: `webpack --mode production`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the react_01@1.0.0 build script.

我的 webpack 文件如下所示：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  //entry: ['@babel/polyfill', './src/index.js'],
  entry: './src/index.js',
  // Where files should be sent once they are bundled
 output: {
   path: path.join(__dirname, '/dist'),
   filename: 'index.bundle.js'
 },
  // webpack 5 comes with devServer which loads in development mode
 devServer: {
   port: 3000,
   watchContentBase: true
 },
  // Rules of how webpack will take our files, complie & bundle them for the browser
 module: {
   rules: [
     {
       test: /\.(js|jsx)$/,
      // test: /\.jsx?/,
       exclude: /nodeModules/,
       use: {
         loader: 'babel-loader',
         query:
           {
             presets:['react', 'preset-env']
           }
       }
     },
     {
       test: /\.css$/,
       use: [MiniCssExtractPlugin.loader, 'css-loader']
     }
   ]
 },
 plugins: [new HtmlWebpackPlugin({ template: './src/index.html' }), new MiniCssExtractPlugin()]
}

我的包 json 如下所示：

{
  "name": "react_01",
  "version": "1.0.0",
  "description": "",
  "main": "index.jsx",
  "scripts": {
    "serve": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/preset-env": "^7.14.7",
    "@babel/preset-react": "^7.14.5",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.0.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.2",
    "mini-css-extract-plugin": "^2.1.0",
    "style-loader": "^3.1.0",
    "webpack": "^5.45.1",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }

我的 babelrc 文件如下所示：

{
  "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
  ]
}

我的 index.js 文件如下所示：

import React from "react"
import ReactDom from "react-dom"
import App from "./components/app"
import "./style.css"

ReactDom.render(<App />, document.getElementById('app'))

我的 app.js 文件如下所示：

import React from "react"

function App() {
    return (<div>
        <h2>Welcome to My new React App</h2>
        <h3>Date : {new Date().toDateString()}</h3>
    </div>)
}

export default App

*** 编辑：不知道我在想什么...我完全忘了在 :o 之前添加 webpack 代码！我想那是一个阅读障碍的高级时刻。现已添加。

Answer 1

只需删除样式导入

导入“./style.css”

Webpack 使用 JavaScript，而不是 css，如果你想让它学习它，你需要创建一个 webpack 配置文件并使用适当的加载器来处理 css

Webpack Build SyntaxError: Unexpected token )

1 个答案: