React的webpack配置

在学习webpack的过程中，有些内容如热加载，sourceMap，loaders感觉一直未能掌握。
尤其是在构建React的过程中，配置过程异常复杂，不得不使用脚手架来搭建React应用，可是脚手架并不十分方便。
翻看了若干博文和官网文档，有以下收获。

一 loaders:

为什么需要loaders：

如果没有loaders，webpack仅仅支持js文件的打包，图片，css，json等统统不认识。而plugins可以扩展webpack的更多功能。

常用的loaders有：

js，css，图片，json，文件。

1. js loaders:

1.1 babel-loader（ES6，React）

Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中。
除此之外，用得最多的是解析ES6的babel-preset-env包和解析JSX的babel-preset-react包，这两个包一个用于解析ES6语法，另一个用来解析React的jsx语法。
（babel-preset-env是babel-preset-es2015和babel-preset-latest的升级版）
babel-preset简介
安装：

// npm一次性安装多个依赖模块，模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

配置（以下可任选一种方式配置）
方式1：
放在webpack文件里配置

rules: {
  [
    test: /(\.jsx|\.js)/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['env','react']
      }
    }
  ]
}

方式2：
通过babel单独配置

//.babelrc
{
    "presets": ["env", "react"]
}

注意：babel-loader比较耗费性能，所以要除去node_modules里的js文件

1.2 jsx-loader（React语法）

上述已经装了babel-preset-react就不再装这个loader了。

2.css loaders:

2.1 常用style-loader和css-loader

css-loader 处理css中路径引用等问题
style-loader 动态把样式写入css

npm install --save-dev style-loader css-loader

2.2 less loader

配置less：

npm install --save-dev less-loader less

//注意：style-loader,css-loader,less-loader的顺序不能变，否则会解析不出来
{
       test: /(\.css|\.less)$/,
       use: [ 'style-loader', 'css-loader','less-loader'],
       include: path.resolve(__dirname, 'src')
}

这个时候其实webpack还是不认识less，要把less导入到对应的js文件中，less才能和相应的js文件一起打包。

import './style/app.less';

二. plugins

HtmlWebpackPlugin 用于生成html模板
Hot Module Replacement（HMR） 实时刷新代码

三. devtool

实现代码映射。

四. devserver

实现本地服务器。

根据以上描述，就实现了一个支持React，ES6和less的基本的模板webpack文件。
github代码链接

欢迎留言互相学习。

参考文档：
webpack官网文档
webpack入门详解
webpack常用loders
webpack React解决方案