2022年5月4日
摘要：
当涉及到动态代码拆分时，webpack 提供了两个类似的技术。第一种，也是推荐选 择的方式是，使用符合 ECMAScript 提案 的 import() 语法 来实现动态导入。第二 种，则是 webpack 的遗留功能，使用 webpack 特定的 require.ensure 。让我们 先尝试使用 阅读全文
摘要：
module.exports = { entry: { index: { import: './src/index.js', dependOn: 'shared', }, another: { import: './src/another-module.js', dependOn: 'shared' 阅读全文
摘要：
代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用合理，会极大影响加载时间。 常用的代码分离方法有三种： 入口起点：使用 entry 配置手 阅读全文
摘要：
webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。 loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供 应用程序使用，以及被添加到依赖图中。 在 webpack 的配置中，loader 有两个属性： 阅读全文
摘要：
如 JSON 文件，CSV、TSV 和 XML。类似于 NodeJS，JSON 支持实际上是内置的，也就是说 import Data from './data.json' 默认将正常运行。要导入 CSV、TSV 和 XML，你可以使用 csvloader 和 xml-loader。让我们处理加载这 阅读全文
摘要：
抽离css： npm install mini-css-extract-plugin --save-dev 压缩css： css-minimizer-webpack-plugin --save-dev 在多数情况下，我们也可以进行压缩CSS，以便在生产环境中节省加载时间，同时还 可以将CSS文件抽离 阅读全文
摘要：
resource资源 ：asset/resource 可以生成一个单独的文件并且到处url inline资源 ：asset/inline 它实现了导出一个资源的dataUrl，比如我们可以吧一个svg转成一个base64的字符串 source资源 ：asset/source 它可以导出资源的源代码 阅读全文
摘要：
module: { rules: [ test: /\.jpg/, type: 'asset' ] } 现在，webpack 将按照默认条件，自动地在 resource 和 inline 之间进行选择： 小于 8kb 的文件，将会视为 inline 模块类型，否则会被视为 resource 模块类 阅读全文
摘要：
module: { rules: [ test: /\.txt/, type: 'asset/source' ] } 所有 .txt 文件将原样注入到 bundle 中 阅读全文
摘要：
// 配置资源文件 module: { [ { test: /\.svg/, type: 'asset/inline' } ], } //... module.exports = { //... // 配置资源文件 module: { rules: [ //... { test: /\.svg/, 阅读全文
摘要：
自定义输出文件名 默认情况下， asset/resource 模块以 [contenthash][ext][query] 文件名 发送到输出目录。 可以通过在 webpack 配置中设置 output.assetModuleFilename 来修改此模 板字符串：output: { assetMod 阅读全文
摘要：
webpack-dev-server 为你提供了一个基本的 web server，并且具有 live reloading(实时重新加载) 功能。先安装： npm install --save-dev webpack-dev-server 修改配置文件，告知 dev server，从什么位置查找文件： 阅读全文
摘要：
//... module.exports = { //... output: { //... // 打包前清理 dist 文件夹 clean: true }, //... } 千锋大 阅读全文
摘要：
const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: './src/index.js', output: { filename: 阅读全文
摘要：
https://blog.csdn.net/qq_64143127/article/details/123467297 阅读全文
摘要：
const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const TerserWebpackPlugin = require('terser-webpack-plu 阅读全文
摘要：
const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/js/index.js', output: 阅读全文
摘要：
const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/js/index.js', output: 阅读全文
摘要：
const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { f 阅读全文
摘要：
const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); /* entry: 入口起点 1. string --> './src/index.js' 单入口 打包形成一 阅读全文