webpack-4 babel(es6)转换 polyfill preset transform (es8)

初级webpackage.json配置

目前浏览器大部分识别的是es5,如果朋友们用了es6想让全部浏览器识别就需要用到babel转换

输入命令:  npm install babel-core

 之后去到根路径后创建一个　babelrc　这个文件为自动加载的一个文件

输入命令:touch .babelrc

在js中写入es6语法时需要配置插件

输入命令: npm install babel-plugin-transform-es2015-arrow-functions

下载完后要在babelrc　文件对es6进行配置

要使用babelrc命令就要全局安装

输入命令:　npm install -g babel-cli

运行当前文件：

输入命令: babel src/main.js 运行main.js

 

如果想用到webpack打包里还需要在webpack.dev.js中配置

 module: {
        rules:[
                 // js loaders
            {
                test:/\.js$/,//匹配js
                use:[//加载器
                    {
                        loader:"babel-loader"
                    }
                ],
                exclude:/node_modules/,//忽略转换的文件
                
            }
        ]
    },

要排除　exclude:/node_modules/,//忽略转换的文件就需要

输入命令:npm install babel-loader

 

在项目中运行的时候出现报错，

错误为Module build failed (from ./node_modules/babel-loader/lib/index.js)，大概意思是Babel [email protected]需要Babel 7。x(“@babel/core”包)。如果你想用Babel 6。x ('babel-core')，您应该安装'[email protected]'。

 

输入命令： npm install @babel/core @babel/preset-env

再次重启就可以了；

如果打包后你会发现dist文件中有新生成的内容

如果想找到我们打包后的那个console.log('我是ES6语法'),可以去到main-bundle.js中查找