使用 Webpack 实现前端工程化

人的影响短暂而微弱,书的影响则广泛而深远                ——普希金 我是三水清,之前曾就职于新浪微博和腾讯,目前在某厂做前端架构师。这次专栏我们讲 Webpack,作为笔试必考、面试必问、工作必用的内容,Webpack 正变得越

什么是 Webpack

勤能补拙是良训,一分辛劳一分才。                ——华罗庚 随着 Web 前端的不断发展,传统网页开发在逐渐往 Web 应用(Web Application,简称 WebAPP)的开发方式转变,页面开始变得越来越复杂,复杂的应用

03 Webpack 开发环境搭建

从不浪费时间的人,没有工夫抱怨时间不够。               ——杰弗逊 本文将包括安装 Node、NPM、WebPack 开发环境,我使用的开发 IDE 是 VScode。因为 Webpack 实际是用 Node.js 写的,所以首先

04 使用 webpack-cli 体验零配置打包

人生太短,要干的事太多,我要争分夺秒。                ——爱迪生 下面通过搭建一个使用 Webpack 打包的项目,来体验下 Webpack 的零配置打包。 初始化项目首先是创建项目,创建一个名字为zero-config的文件夹

05 基础概念和常见配置项介绍(一)

人生太短,要干的事太多,我要争分夺秒。                ——爱迪生 本节介绍下跟 Webpack 配置相关的概念,以及介绍一个简单并且常用的配置项。 webpack.config.js 配置文件Webpack 是可配置的模块打包工

06 基础概念和常见配置项介绍(二)

构成我们学习最大障碍的是已知的东西,而不是未知的东西。                —— 贝尔纳 除了上篇介绍的的跟 entry 和 output 相关的配置之外,本文将继续介绍 Webpack 其他重要配置。 resolveWebpack

07 Webpack 中的模块化开发

要成就一件大事业,必须从小事做起。                ——列宁 模块是指为了完成某功能所需的程序或者子程序,模块是系统中「职责单一」且「可替换」的部分。所谓的模块化就是指把系统代码分为一系列职责单一且可替换的模块。模块化开发是指如何

08 在 Webpack 中使用 Babel 转换 JavaScript 代码

世界上最快乐的事,莫过于为理想而奋斗。                ——苏格拉底 在 webpack 中编写 JavaScript 代码,可以使用最新的 ES 语法,而最终打包的时候,webpack 会借助 Babel 将 ES6+语法转换成

09 Webpack 中使用 TypeScript 开发项目

上天赋予的生命,就是要为人类的繁荣和平和幸福而奉献。                ——松下幸之助 TypeScript 是微软公司提出来的一个 JavaScript 的超集语言,主要作用是为 JavaScript 增加静态类型检测系统和 EC

10 Webpack 中样式相关的配置

人的影响短暂而微弱,书的影响则广泛而深远。                ——普希金 Webpack 中一切皆模块,CSS 也可以在 JavaScript 中被直接引用,但是 CSS 的语法 JavaScript 是不能解析的,所以下面代码会报