webpack
-
Webpack入门，CSS Modules
CSS Modules是近年来比较流行的一种开发模式，其理念就是把CSS模块化，让CSS也拥有模块的特点，具体如下： 使用CSS Modules时不需要额外安装模块，只要开启css…
-
Webpack入门，样式预处理
样式预处理指的是开发者在开发过程中经常会使用一些样式预编译语言，如SCSS、Less等，在项目打包过程中再将这些预编译语言转换成CSS。借助这些语言强大和便捷的特性，可以降低项目的…
-
Webpack入门，样式处理
除了JavaScript以外，Webpack在打包方面另一个重要的工作就是样式处理。在具有一定规模的工程中，由于手工维护CSS的成本过于高昂，开发者可能会需要更智能的方案来解决浏览…
-
Webpack入门，自定义loader
有时开发者会遇到现有loader无法很好满足需求的情况，这时就需要对其进行修改，或者编写新的loader。 下面以一个简单的示例，讲解以下如何实现一个loader。 需求 实现一个…
-
Webpack入门，常用loader
babel-loader babel-loader用于处理ES6+并将其编译为ES5，它使开发者能够在工程中使用最新的语言特性，同时不必特别关注这些特性在不同平台的兼容问题。 在安…
-
Webpack入门，预处理器
一个Web工程通常会包含HTML、JS、CSS、图片、字体等多种类型的静态资源，且这些资源之间都存在着某种联系。对于Webpack来说，所有这些静态资源都是模块，开发者可以像加载一…
-
Webpack入门，资源处理流程
在前几篇的文章中，梳理了Webpack的模块打包功能。可以把Webpack打包模块理解成类似于工厂中的产品组装，也就是把一个个零部件拼起来得到最终的成品。接下来的几篇，则主要要关注…
-
Webpack入门，模块打包原理分析
面对工程中成百上千个模块，Webpack究竟是如何将它们有序地组织在一起，并按照开发者预想的顺序运行在浏览器上的呢？本篇文章将通过一个简单的示例。分析一下Webpack模块打包的原…
-
Webpack入门，模块打包之加载其他类型的模块
在实际开发中，开发者可能遇到其他类型的模块，比如AMD、UMD模块，虽然这些模块在目前的使用场景已经不多，但是遇到这些模块时仍然需要知道如何处理。 加载非模块化的文件 非模块化文件…
-
Webpack入门，模块打包之CommonJS与ES6 Module的区别
前面几篇文章分别介绍了CommonJS和ES6 Module两种形式的模块定义，这篇将介绍下两者各自的特性。 动态与静态 CommonJS与ES6 Module最本质的区别在于前者…
-
Webpack入门，模块打包之ES6 Module
JavaScript之父Brendan Eich在最初设计这门语言时，并没有包含模块的概念。基于越来越多的工程需要，为了使用模块化进行开发，JavaScript社区涌现出了多种模块…
-
Webpack入门，模块打包之CommonJS简介
CommonJS 说到前端的模块，不得不讲一下CommonJS。CommonJS是由JavaScript社区于2009年提出的包含模块、文件、IO、控制台在内的一系列标准。Node…
