蛐蛐的博客

文档：https://www.webpackjs.com/contribute/writing-a-plugin/1.简介插件向第三方开发者提供了 webpack 引擎中完整的能力。使用阶段式的构建回调，开发者可以引入它们自己的行为到 webpack 构建流程中。创建插件比创建 loader 更加高级，因为你将需要理解一些 webpack 底层的内部特性2.创建插件webpack插件由以下组成：一个 JavaScript 命名函数。 在插件函数的 prototy

文档：https://www.webpackjs.com/contribute/writing-a-loader/1.简介loader 是导出为一个函数的 node 模块。该函数在 loader 转换资源的时候调用。给定的函数将调用 loader API，并通过 this 上下文访问。2.配置首先在本地开发loader需要测试，这里介绍配置本地loader（而不是node_modules下的）的方式匹配(test)单个 loader，你可以简单通过在 rule 对

文档：https://webpack.js.org/concepts/hot-module-replacement/1.简介模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面。主要是通过以下几种方式，来显著加快开发速度：保留在完全重新加载页面时丢失的应用程序状态。 只更新变更内容，以节省宝贵的开发时间。 调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。下面需要了解它是如何运行的

文档：https://webpack.js.org/concepts/targets/1.简介因为服务器和浏览器代码都可以用 JavaScript 编写，所以 webpack 提供了多种构建目标(target)，你可以在你的 webpack 配置中设置。2.使用要设置target属性，只需要在你的 webpack 配置中设置 target 的值。module.exports = { target: 'node'};node：会编译为用 Node.js 的 ..

文档：https://webpack.js.org/concepts/dependency-graph/1.简介任何时候，一个文件依赖于另一个文件，webpack 就把此视为文件之间有 依赖关系 。这使得 webpack 可以接收非代码资源(non-code asset)（例如图像或 web 字体），并且可以把它们作为依赖提供给你的应用程序。webpack 从命令行或配置文件中定义的一个模块列表开始，处理你的应用程序。从这些入口起点 开始，webpack 递归地构建一个依赖图 ，

文档：https://webpack.js.org/concepts/module-resolution/1.简介resolver 是一个库(library)，用于帮助找到模块的绝对路径。一个模块可以作为另一个模块的依赖模块，然后被后者引用，如下import foo from 'path/to/module'// 或者require('path/to/module')所依赖的模块可以是来自应用程序代码或第三方的库(library)。resolver 帮助 webpa

文档：https://www.webpackjs.com/concepts/modules/1.简介Node.js 从最一开始就支持模块化编程。在web端模块化的支持正缓慢到来。在 web 存在多种支持 JavaScript 模块化的工具，这些工具各有优势和限制。webpack 基于从这些系统获得的经验教训，并将模块的概念应用于项目中的任何文件。2.webpack模块对比Node.js 模块，webpack模块能够以各种方式表达它们的依赖关系，几个例子如下：E..

文档：https://www.webpackjs.com/concepts/configuration/1.简介webpack 的配置文件，是导出一个对象的 JavaScript 文件。此对象，由 webpack 根据对象定义的属性进行解析。webpack 配置是标准的 Node.js CommonJS 模块，你可以做到以下事情：通过require导入其他文件 通过require使用 npm 的工具函数 使用 JavaScript 控制流表达式，例如?:操作符 对...

文档：https://www.webpackjs.com/concepts/plugins/1.简介插件是 webpack 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！插件目的在于解决 loader 无法实现的其他事。2.原理webpack 插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访

文档：https://www.webpackjs.com/concepts/loaders/#%E7%A4%BA%E4%BE%8B1.简介loader 用于对模块的源代码进行转换。loader 可以使你在import或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loa..

文档：https://www.webpackjs.com/concepts/mode/1.简介webpack提供mode配置选项，告知 webpack 使用相应模式的内置优化。2.使用module.exports = { mode: 'production'};从命令行传递：webpack --mode=production默认没有配置时，使用productionWARNING in configurationThe 'mode' ..

文档：https://www.webpackjs.com/concepts/output/#%E7%94%A8%E6%B3%95-usage-1.简介配置 output 选项可以控制 webpack 如何向硬盘写入编译结果文件。注意，即使可以存在多个入口起点，但只指定一个输出配置。2.简单配置在 webpack 中配置 output 属性的最低要求是，将它的值设置为一个对象，包括以下两点：module.exports = { entry: { main:

1.简介webpack的入口点，一般包含两个属性第一个属性是入口点的名称，默认为main，可以省略，入口点名称在生成bundle文件名称时有用第二个属性是入口点的输入文件，可以为一个js文件，也可以是多个js文件对应一个入口2.单个入口点单个入口点可以省略入口点名称，直接声明输入文件即可entry: string|Array<string>module.exports = { entry: ['./src/index.js'],};..

1.简介本质上，webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。webpack包含四个核心概念：入口(entry) 输出(output) loader 插件(plugins)2.入口入口指示 webpack 应该使用哪...

1.简介webpack升级后发现build出现错误2.解决使用了CompressionPlugin，而选项的filename有问题，改成如下即可 new CompressionPlugin({ filename: "[path][base].gz", algorithm: 'gzip', test: new RegExp('\\.(js|css)$'), thresho

1.简介webpack升级到5后，出现这个问题2.解决使用代替newHashedModuleIdsPlugin()optimization: { moduleIds: 'hashed',}

1.简介使用file-loader或者url-loader加载图片，发现图片src变为[object Module]2.解决主要在于esModule选项默认情况下，file-loader生成使用 ES 模块语法的 JS 模块。在某些情况下，使用 ES 模块是有益的，例如在模块串联或者tree shaking的情况下。您可以使用以下方法启用 CommonJS 模块语法： { test: /\.(gif|png|..

1.简介webpack-dev-server和webpack-cli升级之后报出这个错误 "webpack": "^5.45.1", "webpack-bundle-analyzer": "^4.4.2", "webpack-cli": "^4.7.2", "webpack-dev-server": "^3.11.2", "webpack-hot-middleware": "^2.25.0", "webpack-merge": "^5.8.0"..