随笔分类 - 编译链：webpack vite
摘要：A嵌入B，B加载速度太慢了，需要4s+，需优化： B系统技术栈： vue3 + vite 优化结果如下，上下对比还有有差距的： 一、先处理： 首屏加载的文件——先优化文件大 step1： 安装可视化插件 rollup-plugin-visualizer； viteconfig.js export d
阅读全文
摘要：Vite vs Webpack 对比 1. 基本概念 // Vite // 基于ESM的构建工具，开发服务器基于浏览器原生ESM // 生产环境使用Rollup打包 // Webpack // 基于CommonJS的模块打包工具 // 开发和生产环境都使用webpack打包 2. 主要区别 2.1
阅读全文
摘要：Vue2 默认 Webpack 配置 1. 默认Loader配置 // 1. vue-loader // 处理.vue单文件组件 { test: /\.vue$/, loader: 'vue-loader' } // 2. babel-loader // 处理JavaScript { test: /
阅读全文
摘要：Webpack 常用 Loader 指南 1. 样式处理Loader // 1. style-loader // 将CSS注入到DOM中 { test: /\.css$/, use: ['style-loader', 'css-loader'] } // 2. css-loader // 解析CSS
阅读全文
摘要：Webpack 常用 Plugin 1. 基础插件 // 1. HtmlWebpackPlugin // 自动生成HTML文件，并注入打包后的资源 new HtmlWebpackPlugin({ template: './src/index.html' }); // 2. CleanWebpackP
阅读全文
摘要：HtmlWebpackPlugin 说明 1. 基本概念 HtmlWebpackPlugin是一个webpack插件，用于简化HTML文件的创建，以便为webpack打包后的文件提供服务。它会自动生成一个HTML文件，并自动注入所有打包后的资源（JS、CSS等）。 2. 核心功能 // 1. 生成H
阅读全文
摘要：1. Hooks的基本概念 // Hooks是webpack提供的事件机制 // 允许在webpack编译过程中的特定时机执行自定义代码 // 基于Tapable库实现，支持同步和异步操作 2. Hooks的类型 // 同步Hook compiler.hooks.someHook.tap('Plug
阅读全文
摘要：1. Loader的基本结构 // 同步loader module.exports = function(source) { // source是源文件的内容 // 返回处理后的内容 return source; }; // 异步loader module.exports = function(so
阅读全文
摘要：1. Plugin的基本结构 class MyPlugin { // 构造函数，接收配置参数 constructor(options = {}) { this.options = options; } // 必须的apply方法，webpack会调用这个方法 apply(compiler) { //
阅读全文
浙公网安备 33010602011771号