错误:将babel与webpack一起使用时,模块解析失败

时间:2019-10-27 18:27:41

标签: npm webpack babel

当我尝试安装babel以使用它进行webpack并进行配置时,我遇到此错误。我尝试了与babel和webpack不同的版本,并且尝试了许多配置,但其中的任何一个都不起作用,并且它们始终抛出相同的错误。 注意:我已经有另一个插件,例如webpack-server和webpack-html,但是我很确定它们不会影响babel。

ERROR in ./node_modules/core-js/modules/es6.regexp.exec.js 1:3
Module parse failed: Unexpected character ' ' (1:3)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
 @ ./node_modules/core-js/es6/index.js 102:0-37
 @ ./node_modules/@babel/polyfill/lib/noConflict.js
 @ ./node_modules/@babel/polyfill/lib/index.js
 @ multi @babel/polyfill ./src/js/index.js

.babelrc文件:

// projectname/.babelrc
{
    "presets": [
     [ "@babel/preset-env", {
       "modules": false,
       "targets": {
        "browsers": [
          "last 2 Chrome versions",
          "last 2 Firefox versions",
          "last 2 Safari versions",
          "last 2 iOS versions",
          "last 1 Android version",
          "last 1 ChromeAndroid version",
          "ie 11"
        ]
       }
     } ]
    ]
}

webpack.config.js文件:

// webpack.config.js
const path = require( 'path' );
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    context: __dirname,
    entry: ['@babel/polyfill', './src/js/index.js'],
    output: {
        path: path.resolve( __dirname, 'dist' ),
        filename: 'js/bundle.js',
    },
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html'
        })
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            }
        ]
    }
};

package.json文件:

{
  "name": "forkify",
  "version": "1.0.0",
  "description": "forkify project",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development --open"
  },
  "author": "Ahmed Hossam",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.6.4",
    "@babel/core": "^7.6.4",
    "@babel/preset-env": "^7.6.3",
    "babel-loader": "^8.0.6",
    "html-webpack-plugin": "^3.2.0",
    "path": "^0.12.7",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9",
    "webpack-dev-server": "^3.9.0"
  },
  "dependencies": {
    "@babel/polyfill": "^7.6.0"
  }
}

0 个答案:

没有答案