Webpack知识体系｜青训营笔记

wkxjhngw

已于 2024-03-18 10:42:43 修改

阅读量78

点赞数

分类专栏： Vue.js 文章标签： webpack 前端 javascript node.js 开发语言

于 2022-08-11 21:59:23 首次发布

本文链接：https://blog.csdn.net/weixin_50945128/article/details/129377784

版权

Vue.js 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

theme: condensed-night-purple

highlight: a11y-dark

这是我参与「第四届青训营」笔记创作活动的的第8天

课程内容:

什么是 Webpack
Webpack打包核心流程 -示例
Entry => Dependencies Lookup =>Transform => Bundle => Output-关键配置项介绍
Loader 组件
Plugin 组件 -如何学习Webpack -入门级:学会灵活应用 -进阶:学会扩展Webpack -大师:源码级理解Webpack打包编译原理

课程目标

理解Webpack的基本用法

通过介绍 Webpack功能、Loader 与 Plugin组件设计，建立一个知识体系

为什么要学习Webpack

理解前端“工程化”概念、工具、目标
一个团队总要有那么几个人熟悉Webpack,某种程度上可以成为个人的核心竞争力
高阶前端必经之路

什么是 Webpack

前端项目由许多资源构成

以前是手动管理资源但是会有许多问题：

依赖手工，文件过多时过程繁琐

当代码文件之间有依赖的时候,就得严格按依赖顺序书写，但是后期如果修改了位置就会出现问题

开发与生产环境一致,难以接入TS 或JS新特性, 比较难接入 Less、Sass等工具

JS、图片、cSS资源管理模型不一致

从本质上来讲，webpack是一个现代的JavaScript应用的静态模块化打包工具。

模块

前端模块化

目前使用前端模块化的一些方案: AMD、CMD、CommonJS、ES6。

在ES6之前，我们要想进行模块化开发,就必须借助于其他的工具，让我们可以进行模块化开发。并且在通过模块化开发完成了项目后,还需要处理模块间的各种依赖,并且将其进行整合打包。

而webpack其中一个核心就是让我们可能进行模块化开发,并且会帮助我们处理模块间的依赖关系。

而且不仅仅是JavaScript文件,我们的CSS、图片、json文件等等在webpack中都可以被当做模块来使用(在后续我们会看到)。

这就是webpack中模块化的概念。

打包

打包如何理解呢? 理解了webpack可以帮助我们进行模块化，并且处理模块间的各种复杂关系后,打包的概念就非常好理解了。

就是将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)。

并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。

但是打包的操作似乎grunt/gulpt也可以帮助我们完成，它们有什么不同呢?

和grunt/gulp的对比

grunt/gulp的核心是Task 我们可以配置一系列的task，并且定义 task要处理的事务(例如ES6、ts转化，图片压缩，scss转成css) 之后让grunt/gulp来依次执行这些task ,而且让整个流程自动化. 所以grunt/gulp也被称为前端自动化任务管理工具。定义一些task，自动化处理很多东西，如果没有做严格配置，是不能使用模块化的

我们来看一个gulp的task 下面的task就是将src下面的所有js文件转成ES5的语法,并且最终输出到dist文件夹中。

const gulp = require('gu1p');
const babe1 = requirec('gu1p-babe1');
gulp.task( "js ", () =>
  gulp.src('src/*.js ')
    .pipe(babe1({
      presets: ['es2015']
    }))
    .pipe(gulp.dest('dist'))
);

什么时候用grunt/gulp呢?

如果你的工程模块依赖非常简单，甚至是没有用到模块化的概念. 只需要进行简单的合并、压缩，就使用grunt/gulp即可。但是如果整个项目使用了模块化管理，而且相互依赖非常强，我们就可以使用更加强大的webpack了。

所以,grunt/gulp和webpack有什么不同呢?

grunt/gulp更加强调的是前端流程的自动化,模块化不是它的核心。 webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能，是他附带的功能。