webpack构建react应用三：使用webpack Loaders 模块加载器(一)

Webpack 本身只能处理原生的 JavaScript模块，但是loader转换器可以将各种类型的资源转换成JavaScript模块。这样，任何资源都可以成为 Webpack 可以处理的模块。
Webpack将所有静态资源都认为是模块，比如JavaScript，CSS，LESS，TypeScript，JSX，CoffeeScript，图片等等，从而可以对其进行统一管理。为此Webpack引入了加载器的概念，除了纯JavaScript之外，每一种资源都可以通过对应的加载器处理成模块。和大多数包管理器不一样的是，Webpack的加载器之间可以进行串联，一个加载器的输出可以成为另一个加载器的输入。比如LESS文件先通过less-load处理成css，然后再通过css-loader加载成css模块，最后由style-loader加载器对其做最后的处理，从而运行时可以通过style标签将其应用到最终的浏览器环境。
上一章我们已经成功的在控制台输出了hello world!接下来我们进一步的去完善，加入react。

安装react

npm install react --save
npm install react-dom --save

安装完成之后，打开entry.js，我们在这里加入react代码，如下图

import React from 'react';import { render } from 'react-dom';render(    <div>hello world</div>,    document.getElementById('app'));

加入后会发现这里会报错！因为在webpack看来一切都是模块，只有通过合适的loaders，它们才可以被当做模块被处理。

安装合适的loaders

npm install babel-loader --save-dev
npm install babel-core --save-dev //安装加载器 babel-loader 和 Babel 的 API 代码 babel-core
npm install babel-preset-es2015 --save-dev //ES2015转码规则
npm install babel-preset-react --save-dev //react转码规则
npm install babel-preset-stage-0 --save-dev //ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个，这里我装的是stage-0
npm install babel-preset-stage-1 --save-dev
npm install babel-preset-stage-2 --save-dev
npm install babel-preset-stage-3 --save-dev
也可以一起安装
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-0 --save-dev

写入配置

const path = require('path');module.exports = {    entry: "./src/entry.js",    output: {        path: '/dist/',        filename: "bundle.js",        publicPath: '/dist/'    },    module: {        rules: [            {                test: /\.js$/,                loader: 'babel-loader',                include: [                    path.resolve(__dirname, "src")                ],                options: {                    presets: ["es2015", "react","stage-0"]                },            },        ],    }}

运行npm run dev 打开页面就可以看到hello world了！
这里建议把presets这里的转码规则写在根目录下的.babelrc的文件里面

{  "presets": ["es2015", "react","stage-0"]}