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代码，如下图

1
2
3
4
5
6
7
8
9
1import React from 'react';

2import { render } from 'react-dom';

3

4render(

5    <div>hello world</div>,

6    document.getElementById('app')

7);

8

9

加入后会发现这里会报错！因为在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

写入配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
1const path = require('path');

2module.exports = {

3    entry: "./src/entry.js",

4    output: {

5        path: '/dist/',

6        filename: "bundle.js",

7        publicPath: '/dist/'

8    },

9    module: {

10        rules: [

11            {

12                test: /\.js$/,

13                loader: 'babel-loader',

14                include: [

15                    path.resolve(__dirname, "src")

16                ],

17                options: {

18                    presets: ["es2015", "react","stage-0"]

19                },

20            },

21        ],

22    }

23}

24

25

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

1
2
3
4
5
1{

2  "presets": ["es2015", "react","stage-0"]

3}

4

5