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

来源：互联网发布：双卡双待联通没4g网络编辑：程序博客网时间：2024/06/08 19:33

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 是声明式的配置语法，而且非常简洁，我们需要定义这三个属性就行了：

entry 入口文件
output 打包后的文件
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-quizModule not found: Error: Cannot resolve module 'webpack/hot/dev-server' in

2 0