JavaScript

A collection of 4 posts

Webpack2 学习记录 — 第二章·模块热替换/兼容配置
JavaScript

Webpack2 学习记录 — 第二章·模块热替换/兼容配置

前言 上一章我们完成了 Webpack 的基础配置。对项目常用的资源都进行了模块化,这一章主要说明在基于 Webpack 的项目上实现模块热替换 (HMR)。模块热替换表现在开发上,就是当我们修改某段 html 或者 js 时。浏览器会自动完成代码的替换切不需要刷新浏览器。别看这个事情很小,一旦习惯了这种设定,就很难回到传统的开发方式了。它对开发效率上的提升是肥肠有必要的,所以我们今天就在基于 Webpack 的项目上来实现这一特性。Webpack 里实现 HMR 有两种方式: webpack-dev-server 自带服务器、配置简便。

  • TangCuXa
    TangCuXa
Webpack2 学习记录 — 第三章·开发/生产配置优化
JavaScript

Webpack2 学习记录 — 第三章·开发/生产配置优化

上一章我们完成了 Webpack HMR 的配置,这也是在前端工程化开发后的标配。相信这些新的东西能让你体会到一些不一样的感觉。这一章我们主要把上一章的配置进行一些优化,并且添加一些打包压缩之类的配置。我们在第一章完成了基本的配置,能够打包输出静态文件。在第二章完成了 HMR 的配置,但是我们会发现在第二章里并不会输出静态文件。所以这里引出一个概念,在前端工程化的项目里,开发与生产并不一定会用同一套配置。开发时我们需要自带服务器、需要 HMR ,但是在生产环境并不需要这些,我们只需要一些静态文件,往 nginx 一丢就可以了。接下来主要就会讲这一部分! 配置优化 项目需要同时具备 dev 和

  • TangCuXa
    TangCuXa
Webpack2 学习记录 — 第一章·最小可用配置
JavaScript

Webpack2 学习记录 — 第一章·最小可用配置

在大前端的路上,总有那么些坑需要去踩。 相比于 14 年初刚出来工作,那时对前端的感觉远没有现在敏感,也不会想到现在的前端会发生天翻地覆的变化。细数自己对前端领域的技能,不懂的还有很多。NodeJs 也是后来粗略看了些,略微了解。前端自动化方面则一直没有时间去学习,例如 Gulp 、Grunt 都一窍不通。而前端模块化方面,之前略微了解 RequireJS ,Webpack 也曾手动写过配置。如今 Webpack 已升级到 2.0 + ,感觉是一个系统的学习并记录下过程的好时机。基于这个原因,就有了这个系列。

  • TangCuXa
    TangCuXa
JavaScript

RequireJS 填坑

什么是 RequireJS — 自己 Google 去。 Start 点我去官网 刚认识用 RequireJS 之前,我还不知道前端还能这样模块化编程,尽管我是个渣,但当我第一次用上之后就回不去以前了,模块化管理你的 JS 是很有必要的,有利于前端工程的规范化管理,页面也不用写很多 link 标签和 script 标签了。 AMD 由于 RequireJS 是基于 AMD 规范的,我们需要来了解它是怎么使用的。 //hello.js define(['jquery'],function($) { //$('body') }) 这是一个基于的 AMD 规范定义的模块,它接收两个参数,第一个为依赖的字符串数组,第二个为回调的函数。这个例子表明它依赖于 jquery ,RequireJS

  • TangCuXa
    TangCuXa