webpack之重新认知babel-loader

前言：

在《 webpack之loader 》中webpack.config.js对babel-loader进行了简单配置。

这篇文章回到我们之前的webpack项目中，看看如何配置babel。

正文：

回顾之前babel-loader配置

这篇文章紧接之前文章 《 webpack之使用less和scss 》。

项目目录：

 package.json 配置。

其中babel-core和babel-loader是核心插件，babel-preset-env 和 babel-preset-react 是处理代码的两个预设。

如果package.json中相关插件没有安装，请执行 npm install 进行安装。

配置webpack.config.js如下：

可以看出options参数对应的内容和 .babelrc 中配置完全一致。

编辑app.js内容：

执行npm run dev ，浏览器打开文件，可以发现 app.js中 箭头函数 和 jsx语法 均正常编译。

优化babel-loader配置

1、添加exclude配置

现在我们的所有js文件中代码都会被babel-loader处理（包括import 进来的react和react-dom文件），不管是否真正需要。

如何让babel-loader有针对性的处理需要处理的文件？根据以前文章的介绍，只需在babel-loader的配置下添加配置exclude。

2、添加.babelrc文件

如果babel-loader下的options配置比较复杂，最好配置.babelrc文件。

在项目下新建.babelrc文件，

编辑.babelrc文件（直接将options对应的内容拿过来就好）：

编辑webpack.config.js

增加了.babelrc文件后，options项即可省略，在执行babel-loader的时候默认会去读.babelrc中的配置。

执行 npm run build 编译成功！