webpack入门到进阶（五) - loader介绍下篇

我们继续介绍几个常用的loader的使用以及作用；

Babel介绍使用

 babel 是一个javascript编辑器。可以看下bable官网介绍：https://www.babeljs.cn/。

我们如今在项目中往往都会使用ES6语法，如：箭头函数，class声明等等，但是低版本的浏览器并不兼容。我们使用webpack打包的时候，webpack也不能帮助我们直接做兼容转化，此时，我们就需要安装Babel-loader，帮助我们。

开始安装：bable-loader ; babel-core(babel核心包)；babel-preset-env(babel预设)；

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

 安装完毕后，我们开始配置；推荐配置是，首先我们在项目中新建一个.babelrc文件。文件里面的内容是一个Json对象。

{
  "presets": ["@babel/preset-env"]
}

 然后我们在webpack.config.js里面配置使用的loader；

      { 
        test: /\.js$/, 
        use: ['babel-loader'],
        //exclude:不需要对node_modules目录下的文件进行处理。
        exclude: /(node_modules)/,
      },

 当我们执行，npm run build后，查看bundle.js的时候，我们就会发现。箭头函数写的setTimeout，就已经改变成具有兼容性的写法了。

 @babel/polyfill

Babel包含一个polyfill，您可以使用新的内置函数，如Promise或WeakMap，静态方法，如Array.from或Object。赋值，实例方法，比如Array.prototype。包含和生成器函数(如果使用regenerator插件)。为了做到这一点，polyfill添加了全局范围和原生原型，比如String。

比如新的语法

var str = '123'

str.includes('2');

想includes这样新的方法，webpack也不能直接帮我们做兼容性语法处理的。

此时我们就需要安装：

npm install --save @babel/polyfill

然后进行引入就可以了。

引入的方法有几种:

例如：

module.exports = {
  entry: ["@babel/polyfill", "./src/main.js"],
};

可以去查看bable的官网：https://www.babeljs.cn/docs/babel-polyfill。

接下来一篇，会介绍几个有趣的插件。未完待续。