Press "Enter" to skip to content

Tag: webpack

前端模块化开发实验(一)——模块概念以及webpack基础配置

现在web 应用前后端分离,前端独立成一个专业,并且还工程化了,这个事实对于 经历过早期Web1.0和2.0的开发者而言,刚接触时应该是比较新奇的。

应用软件网络化,web services 成为不可阻挡的 软件应用的风潮。作为一名技术开发者,一名经历过早期web开发的人,我最感兴趣是 前端工程化的概念——什么东西被工程组件化了。

配置开发环境(webpack)以支持开发React项目

(本文介绍手动配置前端开发环境——构建工具链的核心部分,通常这部分我们都是通过前端框架官方脚手架自动搭建的,例如React 的 create-react-app 和 Vue的 Vue CLI。如果你想了解这些脚手架为我们做了什么,本文对你有用。)

当我们手动为了一支现代的「Web 应用」 准备开发环境,这个过程对于新手来说,不是特别的简单,尤其是当前端使用了像React框架的情况,因为社区生态(ecosystem)存在错综复杂的关系。这需要一些 分析,学习,和记录具体过程。

webpack与项目构建再认识

webpack 这个工具在前端社区异常的流行,以至于我在一年前就简单的研究过(看这里 ,和这里 ),当时发现webpack在无意中提出了「Web模块」的概念——任何web app组成都可以是模块(JS模块是一种),对其进行依赖跟踪,当在发布时可解释最新依赖后打包出最新版本。「Web模块」的概念确让人耳目一新,不过由于一直没有参加具体商业项目,对 Wepback 没有多少经验,也谈不上有太深刻的认识(包括本质和意义)。

最近正在着手做一些实验项目,开始触及项目构建。读了《Setting up an ES6 Project Using Babel and webpack》,发现 webpack 的目标就是 给现代JS项目开发引入 构建 一步( introduce a build step into your process),这个观点我觉得很关键,和深刻。

webpack 与 现代web项目开发流程

最初的JS项目开发是比较简单的,纯手工,开发和构建(编译)混在一起。但显然,当项目规模增大,手工需要转向自动化。 然而,什么东西需要自动化呢?这个问题针对JS项目(Web程序结构很复杂),初学者具有异常的困难。所以学习使用 wepback 一开始是不容易的。

首先明白一点,编译(将一种码转为另一种码)只是构建的一步,模块打包也是一步而已,而自动化构建的具体任务(WHAT)和过程顺序(ORDER),根据项目性质的不同,工作流(WORKFLOW)不同会有不同。例如,项目使用了不同CSS架构方法,那「CSS样式开发」的流程就会不同。