webpack4构建简单前端框架-----配置babel

        由于浏览器对ES6语法的支持还不太完善，而且公司项目要支持IE8，所以要使用Babel将ES6转为ES5，以下操作均在上篇文章中项目下进行（https://blog.csdn.net/qq_33635385/article/details/85277748）。

一、引入babel相关文件

npm install babel-loader babel-core babel-preset-env -D

二、配置babel

在webpack.config.js中添加规则：

{
    test:/\.js$/,
    exclude:/node_modules/, // 排除node_modules文件
    loader:"babel-loader",
    options: {
        presets:["env"]
    }
}

 三、打包

执行npm run build。

          OK，编译报错。看一下报错信息：Error: Cannot find module '@babel/core'  babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.意思说babel-loader8.x需要babel-core版本为为7.x,如果要哦用babel-core6.x应该使用babel-loader7版本。

        下面是我的package.json：

        官方文档指出：

卸载之前的babel-loader babel-core babel-preset-env.

npm uninstall babel-loader -D
npm uninstall babel-core -D
npm uninstall babel-preset-env -D

重新安装：

npm install -D babel-loader @babel/core @babel/preset-env webpack

修改webpack.config.js中的babel配置 ：

{
    test:/\.js$/,
    exclude:/node_modules/,
    loader:"babel-loader",
    options: {
        presets:["@babel/preset-env"]
    }
}

重新编译，打开index.html。

运行成功。