复习webpack4之使用Babel

之前学习过webpack3的知识，但是webpack4升级后还是有很多变动的，所以这次重新整理一下webpack4的知识点，方便以后复习。

这次学习webpack4不仅仅要会配置，记住核心API，最好还要理解一下webpack更深层次的知识，比如打包原理等等，所以可能会省略一些比较基础的内容，但是希望我可以通过此次学习掌握webpack，更好地应对以后的工作。

1.Babel

我们现在日常开发中，基本都会使用ES6语法，但是老版本浏览器不支持ES6语法，会报错，所以我们需要使用Babel来处理ES6语法。

我们先在js中写一些ES6的语法，不经过babel处理就进行打包，我们会发现生成的文件里面仍然是ES6语法，在这种情况下，我们就需要借助babel。

使用之前，需要安装babel-loader和babel/core, cnpm install --save-dev babel-loader @babel/core。

安装完之后，在webpack.config.js里面加一个loader,exclude: /node_modules/意味着，第三方库不用babel-loader进行转换。

babel-loader不会转换es6语法，它只是起到了一个连通webpack和babel的作用，还需要借助其他模块才能转换语法，也就是babel/preset-env，它包含了所有es6转换es5语法的规则。

cnpm install @babel/preset-env --save-dev

然后加一个配置。

但是abel/preset-env还不完全，Promise等还没有被转换，所以还要做一个补充，要安装babel-polyfill。

cnpm install @babel/polyfill --save

安装之后，要在代码中引入@babel/polyfill。

然后再进行webpack打包，生成文件内就已经是es5语法了。但是用这种方式，会把没有用到的方法和对象一起打包，造成资源上的浪费，所以我们可给babel/preset-env增加一个参数，只打包用到的语法。

babel/preset-env会污染全局，所以在开发库的时候不适用，这时候就需要@babel/plugin-transform-runtime了。

cnpm install @babel/plugin-transform-runtime --save-dev

cnpm install @babel/runtime-corejs2 --save

cnpm install @babel/runtime --save

然后增加几个配置。

2. .babelrc

上面配置的方式会让webpack.config.js内容过于冗长，所以我们可以把配置拿到.babelrc文件中。

转载于:https://juejin.im/post/5cc58bb5e51d45789024d846