qq_44746132的博客

webpack之旅这么久，迎来了最终的一个章节，最近由于事情较多，所以最后一张稍稍来的比较晚，但既然是最后一节内容，那我们就来玩点有意思的: 手写一个简易的webpack打包，帮助大家更加深入的理解webpack的打包实现首先我们先理清一下思路: webpack作为一个模块打包工具，它需要知道我们到底引入了哪些模块，我们的js代码中的高级语法的还原为低版本的es语法。那么，我们的思路是: 通...

之前几天的Webpack中我们说到的所有的打包的都是只针对于单个页面的打包，甚至是一些脚手架工具中的webpack页面打包都是单页面的。但是当我们需要打包出多个html页面时，我们又应该怎么搞定呢？关于多页应用的打包其实不是webpack的内容，而是我们需要如何使用nodejs去实现多个页面的打包：假设我们现在有如下一个简单配置文件：const path = require('path')...

上次我们深入介绍了Loader的相关的内容，今天我将带大家深入看看Plugin插件的内容：首先我们回顾一下Plugin具体是什么: plugin是插件，它是类似生命周期的一些东西，当webpack在进行打包的时候去对打包做一些具体的处理。我们之前说plugin的时候也说到了，plugin插件的底层是一个类，它会在webpack打包的某一时刻被执行。那么我们现在就开始带大家去编写一个Plugi...

今天我们的webpack主题是深入理解Loader,那要如何深入理解呢？今天我将带大家自制一个Loader!!好了，文章开始，我们先来回顾一下什么是Loader:我在之前的文章中介绍使用Loader的时候说过，Loader实际上是一个函数，当webpack在处理一些非通用型的文件时，webpack不知道如何去进行处理，那么就由Loader去帮助webpack处理。所以，简单说Loader就是对...

今天我们先说一下文webpack中的Tree Shaking:为什么需要使用Tree shaking?当我们在使用webpack进行模块打包时，如果就仅仅是我们之前的一些基础的配置项，最终会发现我们打包出的所有的模块仅仅只是一个bundle.js文件，webpack将我们所有的打包的模块都放到了这个文件中，就会使得bundle.js文件变得特别的大，这还不是最关键的。当我们在打包时，我们经常会...

今天开始我讲以一些具体的打包例子继续给大家说说webpack中一些可能比较常用到的配置项:今天我将以两个简单的例子，打包Library文件和打包配置TypeScript的代码为例子为大家介绍:关于Library库文件，我们可以将它理解成一些包文件，资源文件，就好比是npm上提供给我们使用的这些的包一样。既然如此，我们就应该清楚，这样的包文件都是可以被使用者直接以 import 这样的e...

什么是Plugin?plugin的理解是插件的含义，即它是webpack打包过程中的一些插件。而实际如果我们了解vue也好，了解react也好，我们都知道这些框架中有一个叫做生命周期的概念，那么我们这里也可以勉强将plugin认为是webpack打包过程的一些生命周期，因为它实际上是在webpack打包过程执行到某一时刻去进行执行的。plugin的底层是一个类，在这个类中我们对webpack的...

Loader是什么?我们知道webpack是基于nodejs开发出来的一个模块打包工具，既然如此，我们知道node中有模块的概念，实质上这里的Loader其实就是一个node的模块，这也满足webpack中<万物皆模块>的概念. loader这个node模块导出的是一个函数，会在webpack转换源文件的时候调用该函数对指定的一些源文件进行转换。这里我们的源文件可以理解成一些非通用...

我们接着昨天的webpack 的内容继续： 今天我们将说一下entry,output的配置以及mode配置，最后我将为大家说到的一个概念Source Map我们先将昨天我们写的一个webpack的一个基本的配置放到这里:const path = require('path')// 该文件需要导出webpack的配置对象module.exports = { entry: path.jo...

今天我们开始新的一个章程，在之后的博客记录中我将一步一步和大家学习惯于webpack的一些配置和在项目中的使用，声明:webpack的配置内容实在过多，我们不可能都说到，所以就只说一些常用的配开始: webpack到底是什么?实际它的定义时有个模块打包工具，将前端开放中的不同的模块打包到一起，在页面引入时减少模块的加载，以模块化的形式关联个文件间的关系，所以我们可以看到在很多的脚手架工具中使...