我的博客简介

设置，打包后，会有有一段注释，告知Terser在优化时，可以删除掉这段代码。

【代码】webpack打包，禁止在文件内注释。

Chunks：默认值是async另一个值是initial，表示对通过的代码进行处理all表示对同步和异步代码都进行处理minSize：拆分包的大小, 至少为minSize；如果一个包拆分出来达不到minSize,那么这个包就不会拆分；maxSize：将大于maxSize的包，拆分为不小于minSize的包；minChunks：至少被引入的次数，默认是1；如果我们写一个2，但是引入了一次，那么不会被单独拆分；name：设置拆包的名称。..................

代码】Webpack之文件压缩compression。

bundle是由webpack打包出来的文件chunk是指webpack在进行模块依赖分析的时候，代码分割出来的代码块module是开发中的单个模块浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但是每一次代码升级或者更新，都需要浏览器去下载新的代码，最方便和最简单的更新方式就是引入新的文件名称。什么是Tree-shakingTreeShaking是一个术语，在计算机中表示消除死代码（dead_code）指打包中去除那些引入了但在代码中没用到的死代码。.............

1

代码】webpack打包原理。

1

alias

发多少

在需要的时候，点击按钮才会加载相应的js文件，但是相关的js文件也需要单独打包。如果想在浏览器空闲的时候预加载文件，则加上注释。

【代码】Hash、ContentHash、ChunkHash。

发的

【代码】Shimming预支变量。

第一步：使用rollup-plugin-serve搭建服务。第二步：当文件发生变化时，自动刷新浏览器。第三步：启动时，开启文件监听。

什么是Gulp？一个工具包，可以帮你自动化和增加你的工作流；

常见的Plugin：这些Plugin是如何被注册到webpack的生命周期中的呢第一：在webpack函数的createCompiler方法中，注册了所有的插件第二：在注册插件时，会调用插件函数或者插件对象的apply方法第三：插件方法会接收compiler对象，我们可以通过compiler对象来注册Hook的事件第四：某些插件也会传入一个compilation的对象，我们也可以监听compilation的Hook事件。

发送到发

发送到发

修改了css、js源代码，会立即在浏览器更新，相当于直接在浏览器的devtools中直接修改样式；默认情况下，webpack-dev-server已经支持HMR，我们只需要开启即可；在不开启HMR的情况下，当我们修改了源代码之后，整个页面会自动刷新，使用的是live reloading；而是将 bundle 文件保留在内存中，事实上webpack-dev-server使用了一个库叫memfs（memory-fs webpack自己写的）将css提取到一个独立的css文件中。webpack热更新原理。....

webpack.config.js文件。

上面各种情况的选择，综合总结出生成的。

promise和generator，symbol转换不了，需要装polyfill。@babel/core：babel的核心代码，必须安装；@babel/cli：可以让我们在命令行使用babel；–out-dir：指定要输出的文件夹dist；src：是源文件的目录；

该文件最重要的函数就是runCli，该函数可以执行webpack-cli包中bin目录下的cli.js文件，也就是说在此之前的步骤只是为了找到cli.js文件，在此之后，webpack-cli才发挥作用。在第三方框架中，React和Vue(未使用Vite的版本)也没有使用webpack-cli.同时，webpack.js文件也做了一些辅助判断，首先查看你是否安装了webpack-cli，如果没有安装，就会询问你是否安装（或手动安装）该包，如果选择不安装，那么程序运行到这就停止了。...

代码】webpack源码学习。

代码】webpack模块化原理（处理cjs和esm混用，然后在浏览器中可执行）

bundle是由webpack打包出来的文件chunk是指webpack在进行模块依赖分析的时候，代码分割出来的代码块module是开发中的单个模块浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但是每一次代码升级或者更新，都需要浏览器去下载新的代码，最方便和最简单的更新方式就是引入新的文件名称。...

ˈlaɪbrəri]图书馆，软件库。

代码】webpack中treeshaking。

babel-runtime它不会污染全局对象和内置对象的原型，比如说我们需要Promise，我们只需要importPromisefrom'babel-runtime/core-js/promise’即可，这样不仅避免污染全局对象，而且可以减少不必要的代码。我们使用es6的语法来编写，最终会通过babel-runtime编译成es5.也就是说，不管浏览器是否支持ES6，只要是ES6的语法，它都会进行转码成ES5.所以就有很多冗余的代码。Stage1-建议（Proposal）这是值得跟进的。...

HMR热更新。

希望看到每个loader，每个plugin消耗的打包时间，可以借助一个插件：speed-measure-webpack-plugin，该插件有webpack版本兼容问题。source-map 比 eval信息更加的全，不仅仅展示出错误的源文件，而且把源文件的目录都给展示出来，这样方便用户查看项目结构。默认情况下，打包完成展示，打包的总时间，并没有告诉我，每个插件使用所消耗的时间。影响 npm run build 打包时间：node版本，电脑性能。有部分插件不支持，可能不支持，需要给注释一下。........

在以上过程中，Webpack会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用Webpack提供的API改变Webpack的运行结果。Webpack的运行流程是一个串行的过程，从启动到结束会依次执行以下流程\。...

引用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin将预编译的模块加载进来。利用DllPlugin和DllReferencePlugin预编译资源模块通过DllPlugin来对那些我们。使用webpack-uglify-paralle来提升uglifyPlugin的压缩速度。原理上webpack-uglify-parallel采用了多核并行压缩来提升压缩速度。使用Tree-shaking和ScopeHoisting来剔除多余代码。通过externals配置来提取常用库。..

gulp强调的是前端开发的工作流程，我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程。webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。gulp是基于任务和流（Task、Stream）的。...