七周七种前端框架二: React 之 webpack 简介

webpack 既不是前端框架也不属于react，写在这里只是貌似他是因为 react-hot-loader 火起来的，而且和react结合也很好用。

webpack的定位

很多人一开始会认为他是一个构建工具，和 grunt/gulp 类似。其实用了之后才会发现 webpack 只是一个 module bundle，翻译过来就是模块打包工具。它所说的模块其实就是 js & css & image 三种资源，webpack做的事情就是让你可以很方便的打包这三种资源。

对比一下大家最熟悉的grunt。grunt是一个 js task runner，他是运行js任务的。grunt能做的事情比 webpack 多很多。webpack只是用来打包 js/css/image。而grunt可以编译模板，执行hint，运行单元测试，甚至执行脚本等等。

所以很多时候 webpack 是要当做grunt/gulp 的一个插件来用的。

webpack的基本用法

webpack 是声明式的配置语法，而且非常简洁，我们需要定义这三个属性就行了：

1. entry 入口文件
2. output 打包后的文件
3. module.loaders 加载器，用来处理入口文件最终生成output指定的文件。

比如我们有两个页面，都是用react写的，基本配置如下：

module.exports = {
  entry: {
    ‘home': './src/home.jsx',‘detail': './src/detail.jsx'
  },output: {
    path: "static/",filename: '[name].js'
  },module: {
    loaders: [
      { test: /\.less$/,loader: 'style!css!autoprefixer!less' },{ test: /\.css/,loader: 'style!css' },{ test: /\.jsx$/,loader: 'babel!jsx?harmony' },{test: /\.(png|jpg)$/,loader: 'url-loader'}
    ]
  },resolve: {
    extensions: ['','.jsx','.less'],}
};

上面的配置就是把 home.jsx 和 detail.jsx 编译成一个js文件。其中对jsx 的处理，定义了两个loader，先通过 jsx-loader 编译jsx成js，然后通过 babel-loader 编译 ES6 语法。

那么问题来了，less 和 image 都到哪里去了？

看看 home.jsx 中的代码：

require("./create-quiz.less");

$(document).ready(function() {
     //省略
});

我们在 js中直接引用了 less ! 这就是 webpack的哲学，所有的模块都是一种资源，所以 css 也是一种资源，而这个资源需要一些loader进行处理才能使用，比如 less 就需要 style!css!autoprefixer!less 四种loader处理。而最后的一个 style-loader 其实就是把 css 内联到了 js中。因此我们只要引入js文件就可以了，不用关它对应哪一个css。

图片同样可以通过 url-loader 来base64 编码到css中，而在css中引用图片的语法却完全不变。

最终我们一个页面虽然用了 js & css & image 三种资源，但是可以全部打包到最终的一个js文件中。

自动刷新

webpack 提供了一个 webpack-dev-server 服务器，需要先安装 sudo npm install -g webpack-dev-server。实际我在mac上安装的时候发现会无法访问home目录的错误，参考这里的解决方法 https://github.com/nodejs/node-gyp/issues/454。加一个 —unsafe-perm 参数即可，因为npm安装的时候为了安全默认是用 nobody 身份安装的，所以可能会出现无权限访问home目录的问题。

安装完成之后，启动服务器 sudo webpack-dev-server —inline ，我们这里使用inline的方式，为了能自动刷新，还要在html中增加一个js引用：

<script src="http://localhost:8080/webpack-dev-server.js"></script>

记得 webpack —watch 也要同时运行，然后再修改代码就可以自动刷新了。

关于 react-hot-loader 有一篇教程： http://gaearon.github.io/react-hot-loader/getstarted/

我在使用 hot-loader 的时候一直有几个没解决没有解决，导致 hot-reload 的时候其实并没有把代码替换掉，不知道有没有谁碰到同样的问题

ERROR in multi create-quiz
Module not found: Error: Cannot resolve module 'webpack/hot/dev-server' in