带Babel的Webpack在Reactjs中不起作用

Question

我正在尝试使用webpack和babel配置我的react应用。我创建了webpack.config.js，它看起来像这样：

> var webpack = require("webpack"); var path = require("path"); var
> HtmlWebpackPlugin = require("html-webpack-plugin"); const VENDORLIBS =
> ["react", "react-dom"]; module.exports = {   mode: 'development',  
> entry: {
>     bundle: "./src/index.js",
>     vendor: VENDORLIBS   },   output: {
>     path: path.join(__dirname, "dist"),
>     filename: "[name].[chunkhash].js"   },   devtool:'inline-source-map',   module: {
>     rules: [
>       {
>         test: /\.js$/,
>         use: "babel-loader",
>         exclude: /node_modules/
>       },
>       {
>         test: /\.css$/,
>         use: ["style-loader", "css-loader"]
>       },
>       {
>         test: /\.scss$/,
>         use: "sass-loader"
>       }
>     ]   },   plugins: [
>     new webpack.optimize.CommonsChunkPlugin({
>       names: ["vendor", "manifest"]
>     }),
>     new HtmlWebpackPlugin({
>       template: "public/index.html"
>     })   ] };

我还创建了.babelrc，它看起来像：

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

现在，当我使用webpack运行此程序时，出现如下错误：

>

 (function (exports, require, module, __filename, __dirname) {


SyntaxError: Invalid or unexpected token
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test-build: `webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] test-build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

[我受困严重，请帮助我解决这个问题。在此先感谢!!

Answer 1

我认为您的webpack条目：{}可能是造成此问题的原因。

用entry: './src/index.js'替换

并确保已安装所有通行证要求：

@ babel / core@ babel /预设环境babel-loader

并参考Webpack Docs