Question

我在项目中使用webpack和babel。虽然webpack正常运行，但是babel不知何故在填充ES6 +功能方面做不到。当我使用npm脚本时，在命令提示符下出现一些错误“ Entrypoint undefined = index.html”。请帮忙！

Package.json

{
  "name": "forkify",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development --open"
  },
  "author": "neeraj",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.2",
    "babel-preset-env": "^1.7.0",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.19.0",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.8"
  },
  "dependencies": {
    "babel-polyfill": "^6.26.0"
  }
}

webpack.config.js

const path=require('path');
const HtmlWebPackPlugin=require('html-webpack-plugin');
module.exports={
    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:{
                    loader:'babel-loader'
                }
            }
        ]
    }

};

.bablerc

{
    "presets":[
        ["env",{
            "targets":{
                "browser":[
                    "last 5 versions",
                    "ie>=8"
                ]
            }
        }]
    ]
}

我得到的错误是：

项目结构：

编辑------------------ 我现在开始遇到一些新错误。

Answer 1

这是html-webpack-plugin的问题，在 3.0.7，但在3.0.8中再次被删除。有关更多信息，请单击here。

因此，如果您运行npm install --save-dev html-webpack-plugin@3.0.7，然后npm run dev将输出 Entrypoint html-webpack-plugin for“ index.html” = index.html 。就个人而言，这不是一个重要的琐事。

Answer 2

存在一些依赖性问题。删除了我的node_modules文件夹，并使用了以下命令：npm install -D babel-loader @ 7 babel-core babel-preset-env webpack

点击此链接以获取更多信息：https://github.com/babel/babel-loader

现在我不再出现任何错误，并且babel正常工作。

仅供参考。...您可能必须分别安装babel-polyfill和html-webpack-plugin。

webpack + babel无法正确捆绑js

2 个答案: