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"]
}