关于个人对webpack4的探索之路（二）es6配置

之前看过一些相关与es6的配置，但是由于webpack版本迭代以及babel自身版本更新问题，导致很多文章在实际运用时无法使用，这是让人很苦恼的事情，想想都脑壳痛。。。所以我针对webpack4以及各种野战知识，写了一个相关配置。

首先，先来看一下配置es6需要哪些插件：

npm 下载：

npm install babel-core --save-dev
npm install babel-eslint --save-dev
npm install babel-loader --save-dev
npm install babel-plugin-transform-runtime --save-dev
npm install babel-polyfill --save-dev
npm install babel-preset-env --save-dev

babel-core：核心插件，不多解释，值得注意的是7版本后的插件进行更换了@babel/core;

babel-eslint: 可以对所有有效的babel代码进行格式校验处理(辅助差劲)；

babel-loader: 作为一个loader插件用于配置webpack的js文件；ps(webpack官网解释):加载 ES2015+ 代码，然后使用 Babel 转译为 ES5;

babel-plugin-transform-runtime: 在babel转义时，会用一些辅助函数并将其内联到js文件中会导致项目很大，所以使用此插件来将辅助函数划分出来，减少文件大小。

babel-polyfill:用来转义es6新的api；

babel-preset-env:用来做优化以及兼容更多的js高版本传送门

介绍完各种插件后，然后我们开始：

1、建立.eslintrc.js并配置

module.exports={    root: true,     parserOptions: {        sourceType: 'module',        "ecmaVersion": 2017    // ECMAScript的版本    },    env: {        "browser": true,         "es6": true    },    rules: {   //规则 可不设置        // "indent": ["error", 4],        // "quotes": ["error", "double"],        // "semi": ["error", "always"],        // "no-console": "error",        // "arrow-parens": 0,    }}

2、配置loader

在module模块里，设置js的loader，

然后再重新运行程序就阔以了。。