关闭

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

标签: 前端框架webpack
6495人阅读 评论(0) 收藏 举报
分类:

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
2
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:684016次
    • 积分:6662
    • 等级:
    • 排名:第3763名
    • 原创:113篇
    • 转载:0篇
    • 译文:7篇
    • 评论:138条
    最新评论