webpack学习笔记12-生产环境构建

背景

通常,我们在开发一个应用的时候,会有生产环境与开发环境的概念,生产环境中,我们需要体积最小的代码,以及图片等静态文件使用cdn上的服务,开发环境上,需要热更新,source-map等来快速排错,目标不同。

阅读更多

webpack学习笔记11-tree shaking

背景

由于,我们在开发过程中,会引入很多大大小小的模块,比如一个计算方法通用的大包,封装了很多很多的方法,但是我们只用到了其中一两个方法,往往希望,打包只打包使用到的方法,未使用到的方法,不被打包进最后的代码中,以保持体积的最小化。

阅读更多

webpack学习笔记10-热更新

背景

在上一节中,已经能够生成一个能够自动重新编译本地服务器了,但是,有一个问题,在项目写的比较大的时候,每次打包的时间就会变得很长,为了解决这个问题,webpack也支持使用模块热替换的方式来进行差异修改,也就是热更新,可以在每次修改的时候,只重新刷新修改的那一部分,这样刷新的速度就会变得很快了。

阅读更多

webpack学习笔记9-建立开发环境

背景

在我们的开发中,很多的代码会频繁的变动,如果每次改动都使用npm run build来打包的话,是一件效率很低的事情,而且这个服务,一般来说,打包的时候,才需要使用,因此需要一个本地服务的,可以快捷的看到打包后的内容

阅读更多

webpack学习笔记8-名词解释

之前已经简单的了解了webpack配置文件loader插件如何安装

阅读更多

webpack学习笔记7-插件

前面已经说明了,webpack是一个打包工具

阅读更多

webpack学习笔记6-插件

前面已经说明了,webpack是一个打包工具

阅读更多

webpack学习笔记4-使用配置文件

webpack可以使用配置文件,也就是名为webpack.config.js的文件,webpack.config.js也是遵循CommonJS规范

阅读更多

webpack学习笔记5-loader

概念

webpack 的配置文件,也就是名为webpack.config.js的文件中,有一个module的属性配置,可以在此属性内,配置相关的规则

阅读更多

webpack学习笔记3-初次尝试打包

这样就得到了一个安装上了webpack及其脚手架的项目

阅读更多