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

前端之家收集整理的这篇文章主要介绍了七周七种前端框架二: 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
原文链接:https://www.f2er.com/react/307498.html

猜你在找的React相关文章