随笔分类 - webpack
摘要：转载请注明 来源:http://www.eword.name/ Author：eword Email:eword@eword.name webpack生产环境优化：dll dll动态链接库 目的：单独的将多个指定的第三方库打包成一个chunk。 意义：将不同的库分割开来，实现代码分割和避免重复打包，
阅读全文
摘要：转载请注明 来源:http://www.eword.name/ Author：eword Email:eword@eword.name webpack生产环境优化：externals externals配置主要是为了防止某些通过CDN引入的包被打包到输出的bundle中。 一、核心配置 /* web
阅读全文
摘要：转载请注明 来源:http://www.eword.name/ Author：eword Email:eword@eword.name webpack生产环境优化：多线程打包 多线程打包主要用于需要打包的文件较多的情况下提高打包效率，缩短打包时间。 注意：开启多进程打包时，进程开启大概需要600ms
阅读全文
摘要：转载请注明 来源:http://www.eword.name/ Author：eword Email:eword@eword.name webpack生产环境优化：PWA PWA可简称为“离线可访问技术”。 一、下载插件 PWA： 渐进式网络开发应用程序（离线可访问） ，需要插件workbox-we
阅读全文
摘要：转载请注明 来源:http://www.eword.name/ Author：eword Email:eword@eword.name webpack生产环境优化：懒加载和预加载 一、直接加载 浏览器一打开，直接加载了test.js 这里使用了直接导入方式。 直接导入：import { mul }
阅读全文
摘要：转载请注明 来源:http://www.eword.name/ Author：eword Email:eword@eword.name webpack生产环境优化：code split code split代码分割，既将打包后的js分割成多份js文件， 方便后期实现“并行加载”、“按需加载”等，提高
阅读全文
摘要：转载请注明 来源:http://www.eword.name/ Author：eword Email:eword@eword.name webpack生产环境优化：tree shaking tree shaking: 去除无用代码 前提： 1.必须使用ES6模块化 2.开启production环境
阅读全文
摘要：转载请注明 来源:http://www.eword.name/ Author：eword Email:eword@eword.name webpack生产环境优化：缓存 生产环境的缓存主要分为：babel缓存和文件资源缓存。 一、babel缓存配置 babel缓存 目标：让第二次打包构建速度更快。
阅读全文
摘要：转载请注明 来源:http://www.eword.name/ Author：eword Email:eword@eword.name webpack压缩 html 和 js 一、压缩 js /* webpack.config.js webpack的配置文件 */ module.exports =
阅读全文
摘要：转载请注明 来源:http://www.eword.name/ Author：eword Email:eword@eword.name webpack的js兼容性处理 js兼容性检查主要用到的 loader 有 babel-loader@8.3.0 @babel/core@7.14.6 @babel
阅读全文
摘要：转载请注明 来源:http://www.eword.name/ Author：eword Email:eword@eword.name webpack开发环境优化： HMR 热加载功能 HMR:hot module replacement 热模块替换/模块热替换 作用：一个模块发生变化，只会重新打包
阅读全文
摘要：转载请注明 来源:http://www.eword.name/ Author：eword Email:eword@eword.name webpack开发环境优化：开发调试环境配置(source-map) 一、source-map配置详解 source-map： 种提供源代码到构建后代码映射技术（如
阅读全文
摘要：转载请注明 来源:http://www.eword.name/ Author：eword Email:eword@eword.name webpack生产环境优化：oneOf 配置 放在oneOf代码块中的 loader 只会匹配一个,避免每一个文件在打包时每个loader都要过一遍。 注意：不能有
阅读全文
摘要：转载请注明 来源:http://www.eword.name/ Author：eword Email:eword@eword.name webpack配置js 语法检查 eslint js 语法检查主要用到的 loader 和插件有：eslint-loader eslint eslint-confi
阅读全文
摘要：转载请注明 来源:http://www.eword.name/ Author：eword Email:eword@eword.name webpack提取 CSS 成单独文件 提取css 成单独文件需要用到 mini-css-extract-plugin插件 一、提取 css 的核心配置 // we
阅读全文
摘要：转载请注明 来源:http://www.eword.name/ Author：eword Email:eword@eword.name webpack的css 兼容性处理 处理 css 兼容性需要使用到 postcss-loader 和postcss-preset-env 两个插件 一、css 兼容
阅读全文
摘要：转载请注明 来源:http://www.eword.name/ Author：eword Email:eword@eword.name webpack压缩 CSS 文件 压缩 CSS 文件需要使用到 optimize-css-assets-webpack-plugin插件 一、压缩 css 文件的核
阅读全文
摘要：转载请注明 来源:http://www.eword.name/ Author：eword Email:eword@eword.name webpack打包 html 资源 一、打包 html文件的核心配置 // webpack.config.js webpack的配置文件 // 路径： ./webp
阅读全文
摘要：转载请注明 来源:http://www.eword.name/ Author：eword Email:eword@eword.name webpack打包其他资源 其他资源：可以定位为“不需要做任务处理，只要直接打包输出就可以的资源”，比如icon图标资源、字体资源等 打包其他资源只需要使用到 fi
阅读全文
摘要：转载请注明 来源:http://www.eword.name/ Author：eword Email:eword@eword.name webpack开发环境devServer配置 一、使用 devServer 为什么要使用 devServer？ 答：因为在开发调试的过程中不用频繁的去执行型打包命令
阅读全文
