webpack babel 配置

1.在webpack.config.js中配置babel：

 module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use:{
                    loader:'babel-loader'
                }
                exclude: path.resolve(__dirname, './node_modules'),
            }
        ]
    },

exclude -- 设置不检索的文件，优化打包速度

include -- 与exclude相反，设置需要检索的文件地址

path.resolve -- 转换绝对路径

path的使用是来自于node.js。。。。http://nodejs.cn/api/path.html

---

module

Options affecting the normal modules (NormalModuleFactory)  这些选项影响普通的模块

module.loaders

An array of automatically applied loaders.  一个自动装载机（loaders）的数组

Each item can have these properties:  每一项都有这些属性

• test: A condition that must be met   必须满足的条件
• exclude: A condition that must not be met  不能满足的条件
• include: A condition that must be met  必须满足的条件
• loader: A string of “!” separated loaders   用 “！”分割loaders
• loaders: An array of loaders as string  loaders的字符串数组

2.在根目录下，创建.babellrc.js文件，里面放置babel支持的类型。

{
    "presets": ["env"]
}

3.安装依赖包

npm install babel-core --save-dev    // babel的核心包

npm install babel-loader --save-dev  // babel的loader包

npm install babel-preset-env --save-dev  // 解析es6的包

npm install babel-preset-react --save-dev  // 解析react的jsx的包

4.相关的资料

webpack中文文档： https://www.webpackjs.com/

webpack英文文档： https://webpack.js.org/

babel中文文档： https://www.babeljs.cn/

babel英文文档： http://babeljs.io/

node中文文档：http://nodejs.cn/

node英文文档：https://nodejs.org/en/

阮一峰的webpack16demos：https://github.com/ruanyf/webpack-demos