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

原创 2015年11月20日 09:11:57

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
版权声明:本文为博主原创文章,未经博主允许不得转载。

基于 webpack 搭建前端工程基础篇

基于 webpack 搭建前端工程基础篇 时间 2016-07-15 08:29:25  公众账号 原文  http://mp.weixin.qq.com/s?__biz=MjM5MTA1Mj...
  • clplain
  • clplain
  • 2016年09月09日 00:25
  • 1982

React源码分析7 — React合成事件系统

1 React合成事件特点React自己实现了一套高效的事件注册,存储,分发和重用逻辑,在DOM事件体系基础上做了很大改进,减少了内存消耗,简化了事件逻辑,并最大化的解决了IE等浏览器的不兼容问题。与...

七周七种前端框架三: Angular2 之 TypeScript

TypeScript 是什么有了拥抱ES6的TypeScript 果断可以抛弃 CoffeeScript 和 Babel了。TypeScript 是ES6的一个超集,也就是完整包含了全部ES6特性,并...

七周七种前端框架一: Angular

Angular 简介虽然最近出了 Angular2,但是Angular1作为之前最火的前端框架依然有大量人在使用。Angular 的特点: 双向数据绑定,主打卖点 MVVM 模型,把视图和逻辑分开 依...

七周七种前端框架三: Angular2 印象

巨大变化在 Angular1 中最重要的两个概念: directive 拓展DOM功能,封装DOM操作,并且是可复用的组件 controller 创建新的 $scope 作用域,封装和DOM无关的业务...

七周七种前端框架四:Vue.js 构建大型应用

真正的模块化前端模块化很早就开始了,无论是 require.js,browserify 进行模块化打包, 还是 Angular 进行依赖注入,我们都可以把JS代码分成一个个小的模块并组装起来。然后我们...

七周七种前端框架四:Vue.js Directive

Directive看上去虽然和Angular中的定义类似,Directive 都是对DOM功能的一种拓展,但是 Vue 的 Directive 要弱的多。因为 Vue Component 其实本来就会...

React 还是 Vue: 你应该选择哪一个Web前端框架?

如果你喜欢用(或希望能够用)模板搭建应用,请使用Vue     如果你喜欢简单和“能用就行”的东西,请使用Vue     如果你的应用需要尽可能的小和快,请使用Vue     如果你计划构建一个...

React 还是 Vue: 你应该选择哪一个Web前端框架?

学还是要学的,用的多了,也就有更多的认识了,开发中遇到选择的时候也就简单起来了。 本文作者也做了总结:     如果你喜欢用(或希望能够用)模板搭建应用,请使用Vue     如果你喜欢简单和“...
  • yzh_2017
  • yzh_2017
  • 2017年02月07日 14:11
  • 18001

前端框架天下三分:Angular React 和 Vue的比较

前端这几年的技术发展很快,细分下来,主要可以分成四个方面: 1.开发语言技术,主要是ES6&7,coffeescript,typescript等;  2.开发框架,如Angular,React...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:七周七种前端框架二: React 之 webpack 简介
举报原因:
原因补充:

(最多只允许输入30个字)