xuan的博客

（1）使用 （2）作用：（1）使用:构建完成后会在 8888 端口展示大小（2）作用 （1）使用 webpack4：优化原因： （1）资源并行解析可选方案 （2） 使用 HappyPack 解析资源 1、原理：每次 webapck 解析一个模块，HappyPack 会将它及它的依赖分配给 worker 线程中 2、使用 （2）使用 thread-loader 解析资源 1、原理：每次 webpack 解析一个模块，thread- loader 会将它及它的依赖分配给 worker 线程中 （3

1、插件没有像 loader 那样的独立运行环境（loader-runner）2、只能在 webpack 里面运行三、插件使用四、开发一个最简单的插件1、src/demo-plugin.js 2、加入到 webpack 配置中五、插件中如何获取传递的参数通过插件的构造函数进行获取 六、插件的错误处理（1）参数校验阶段可以直接 throw 的方式抛出 （2）通过 compilation 对象的 warnings 和 errors 接收 七、插件扩展：

1、初始化参数，从配置文件和shell语句中读到的参数合并，得到最后的参数2、开始编译：用合并得到的参数初始化complier对象，加载是所有配置的插件和内部插件，执行run方法(compiler)开始编译3、确定入口，通过entry找到入口文件4、编译模块，从入口文件出发，调用所有配置的loader对模块进行解析翻译，在找到该模块依赖的模块进行处理5、完成模块编译，得到每个模块被翻译之后的最终的内容和依赖关系6、输出资源，根据入口和模块之间的依赖关系，组装成一个个包含多个模块的chunk，在把每

（1）作用（2） 命令行工具包 yargs （3）webpack-cli 使用 args 分析参数分组 (config/config-args.js)，将命令划分为9类：（4） webpack-cli 执行的结果1、webpack-cli对配置文件和命令行参数进行转换最终生成配置选项参数 options2、最终会根据配置参数实例化 webpack 对象，然后执行构建流程 （1）意义Tapable 是一个类似于 Node.js 的 EventEmitter 的库, 主要是控制钩子函数的发布 与订阅,控制着

（1）npm script（2）webpack直接执行二、查找Webpack入口文件（1）在命令行运行以上命令后，npm会让命令行工具进入node_modules\.bin 目目录查找是否存在 webpack.sh 或者 webpack.cmd 文件，如果存在，就执行，不存在，就抛出错误。（2）实际的入口文件是：node_modules\webpack\bin\webpack.js 四、启动后的结果webpack 最终找到 webpack-cli (webpack-command)

一、loader（1）webpack 开箱即用只支持 JS 和 JSON 两种文件类型，通过 Loaders 去支持其它文 件类型并且把它们转化成有效的模块，并且可以添加到依赖图中。（2）本身是一个函数，接受源文件作为参数，返回转换的结果。二、plugin（1）插件⽤于 bundle ⽂件的优化，资源管理和环境变量注⼊，作⽤于整个构建过程。（2）babel-loader的配置文件.babelrc{"presets": [ + "@babel/preset-env” .

一、概述（1）live reload只要检测到代码改动就会自动重新构建，然后触发网页刷新（2）webapack中的模块热替换可以让代码在页面不刷新的前提下得到最新的改动，甚至不需要重新发起请求就能看到更新后的效果。二、开启HMR（1）HMR是需要手动开启的，并且有一些必要条件。（2）确保项目是基于webpack-dev-server或webpack-dev-middle进行开发的，webpack本身的命令行并不支持HMR。const webpack = require('w

一、HappyPackHappyPack是一个通过多线程来提升webpack打包速度的工具。工作原理（1）在打包过程中有一项非常耗时的工作，就是使用loader将各种资源进行转译处理。最常见的包括使用babel-loader转移ES6+语法和ts-loader转移TS。1、从配置中获取打包入口2、匹配loader规则，并对入口模块进行转译。3、对转译后的模块进行依赖查找。4、对新找到的模块重复2和3步骤，知道没有新的依赖模块。（2）webpack是单线程的。虽然这些转译任.

一、环境配置的封装（1）使用相同的配置文件，在构建开始前将当前所属环境作为一个变量传递进去，在webpack.config.js中通过各种判断条件决定具体使用哪个配置。//package.json{ 'script': { 'dev': "ENV=development webpack-dev-server", 'build': 'ENV=production webpack' }}//webpack.config.jsconst ENV = process.env

一、代码分片（1）代码分片是webpack作为打包工具所特有的一项技术，通过这项技术我们可以把代码按照特定的形式进行拆分，使用户不必一次全部加载，而是按需加载。（2）代码分片可以有效降低首屏加载资源的大小。二、通过入口划分代码（1）webpack中每个入口（entry）都将生成一个对应的资源文件，通过入口的配置我们可以进行一些简单有效的代码划分。（2）对于web应用来说通常会有一些库和工具是不常变动的，我们可以把它们放在一个单独的入口，由该入口产生的资源不会经常更新，因此可以有效地利用客

一、extract-text-webpack-plugin（1）作用：提取样式到CSS文件module: { rules: [ { test: /\.css$/, use: ExtractTextPlugin.extract({ //css的提取 //插件无法提取样式时所采用的loader fallback:

一、概述（1）webpack本身只认识javascript，对于其他类型的资源必须预先定义一个或多个loader对其进行转译，输出为webpack能够接收的形式再继续进行。因此loader做的实际上是一个预处理的工作。（2）loader本质上是一个函数。在webpack4之前，函数的输入和输出都必须为字符串；在webpack4之后，loader也同时支持抽象语法树（AST）的传递，通过这种方法来减少重复的代码解析。output = loader(input)1、input可能是工程源文件的

一、资源处理流程（1）指定一个或多个入口（entry），也就是告诉webpack具体从源码目录下的哪个文件开始打包。（2）存在依赖关系的模块会在打包时被封装为一个chunk（代码块，在webpack中可以被理解成被抽象和包装过后的一些模块）（3）根据具体配置不同，一个工程打包时可能会产生一个或多个chunk。（4）webpack会从入口文件开始检索，并将具有依赖关系的模块生成一颗依赖树，最终得到一个chunk。由整个chunk得到的打包产物我们一般称之为bundle。（5）每一个入口都会

一、CommonJS（1）CommonJS是由Javascript社区于2009年提出的包含模块、文件、IO、控制台在内的一系列标准。（2）在Node.js的实现中采用了CommonJS标准的一部分，并在其基础上进行了一些调整。我们所说的CommonJS模块和Node.js中的实现并不完全一致，现在一般提到CommonJS其实是Node.js中的版本，而非它的原始定义。（3）CommonJS中规定每个文件是一个模块。 导出 （1）导出是一个模块向外暴露自身的唯一方式。在CommonJS

一、Webpack概念Webpack是一个开源的Javascript模块打包工具，其最核心的功能是解决模块之间的依赖，把各个模块按照特定的规则和顺序组织在一起，最终合并为一个JS文件（有时会有多个）。这个过程就叫作模块打包。二、模块打包工具（1）模块打包工具的任务就是解决模块间的依赖，使其打包后的结果能运行在浏览器上。它的工作方式主要分为两种（Webpack、Parcel、Rollup）将存在依赖关系的模块按照特定规则合并为单个JS文件，一次全部加载进页面中。 在页面初始时加载一个入口模

一.webpack1. 使用webpack打包后的代码已经不只是你写的代码，其中夹杂了很多webpack自身的模块处理代码。2.各种格式的文件如.jpg,.less，通过特定的加载器（Loader）编译后，最后统一生成为.js,.css,.png等静态资源文件。3.在webpack世界里，一张图片，一个css甚至一个字体，都称为模块（module），彼此存在依赖关系，webpack就是...

一.什么是WebpackWebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。Webpack有一个不可不说的优点，它把所有的文件都都当做模块处理，JavaScript代码，CSS和fonts以及图片等等通过合适的loader都可...