随笔分类 - webpack
vite常用配置
摘要:import {defineConfig} from 'vite' import vue from '@vitejs/plugin-vue' import vitePluginImp from 'vite-plugin-imp' import path from 'path' const isPro
阅读全文
手写vite
摘要:vite实现原理是什么? 当声明一个 script 标签类型为 module 时如: <script type="module" src="/src/main.js"></script>浏览器就会像服务器发起一个GET http://localhost:3000/src/main.js请求main.
阅读全文
webpack中的require.context
摘要:在我们项目开发中,经常需要import或者export各种模块,那么有没有什么办法可以简化这种引入或者导出操作呢?答案是肯定的,下面就为大家介绍一下require.context 我们会这样引入组件: import A from 'components/A' import B from 'compo
阅读全文
dart-scss 替代node-scss
摘要:就在今天,Sass 官方团队正式宣布 Libsass 将弃用,以及基于它的 Node Sass 和 SassC,并且建议用户使用 Dart Sass。 首先我们看下官方博客的一些回复(前半部分均来自官方博客 https://sass-lang.com/blog/libsass-is-deprecat
阅读全文
koa源码
摘要:参考代码: learn-koa2 我们先来看段原生Node实现Server服务器的代码: const http = require('http'); const server = http.createServer((req, res) => { res.writeHead(200); res.en
阅读全文
webpack-dev-server 源码
摘要:webpack-dev-server 简介 Use webpack with a development server that provides live reloading. This should be used for development only.It uses webpack-dev
阅读全文
webpack loader- 图片处理
摘要:静态图片: 页面直接使用<img src='' alt=''> 来使用,在页面中写死的 用js来生成的 动态图片:通过ajax请求服务器,从服务器得到的图片路径,这些是不需要前端进行处理的 1、打包图片为 base64格式 / 文件路径格式 //main.js里引入图片模块 var src = re
阅读全文
webpack的loader的原理和实现
摘要:想要实现一个loader,需要首先了解loader的基本原理和用法。 1. 使用 loader是处理模块的解析器。 module: { rules: [ { test: /\.css$/, use: [ // 多个loader,从右向左解析,即css-loader开始 MiniCssExtractP
阅读全文
Webpack中Loader的pitch方法
摘要:一、Loader介绍 1.官网介绍:loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言(如 TypeScr
阅读全文
url-loader和file-loader区别
摘要:url-loader解决的问题: 如果图片较多,会发很多http请求,会降低页面性能。url-loader会将引入的图片编码,生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中,最终只需要引入这个文件就能访问图片了。当然,如果图片较大,编码会消耗性能。因此url-loade
阅读全文
vue插件 webpack打包 style中的element样式没有打包进去
摘要:vue插件 webpack打包 style中的element样式没有打包进去
阅读全文
css-loader导致vue中样式失效
摘要:module.exports = { ... css: { ... esModule: false } ... } 问题描述 vue文件中的样式失效 环境 vue-cli 4.4.6 css-loader 4.2.1 vue-style-loader 4.1.2 原因 vue-cli 4.4.6 v
阅读全文
vue-cli 中执行的 vue-cli-service源码中执行了webpack什么
摘要:最近又整回vue去了,不说了,还是脚手架先整吧。假设你已经通过vue create vue-base有了vue-base 项目 然后我看到 "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build",
阅读全文
Webpack原理—编写Loader和Plugin
摘要:编写 Loader Loader就像是一个翻译员,能把源文件经过转化后输出新的结果,并且一个文件还可以链式的经过多个翻译员翻译。 以处理SCSS文件为例: SCSS源代码会先交给sass-loader把SCSS转换成CSS; 把sass-loader输出的CSS交给css-loader处理,找出CS
阅读全文
webpack优化系列-多进程打包thread-loader
摘要:项目变的庞大,文件很多的情况下,采取多进程打包 如果小项目,文件不多,无需开启多进程打包,反而会变慢,因为开启进程是需要花费时间的 多进程打包: 1 安装 thread-loadernpm i thread-loader -D 配置如下: module.exports = { entry: './s
阅读全文
用webpack将多个scss文件打包成一个css文件
摘要:初始化项目 新建一个文件夹,然后执行命令 npm init -y npm install webpack webpack-cli -D 编写scss文件 新建一个src文件夹,然后将scss文件全部放在里面 以下是我的目录结构 node_modules/ src/ bg/ bg.scss borde
阅读全文
Tree-Shaking原理
摘要:一. 什么是Tree-shaking 先来看一下Tree-shaking原始的本意 上图形象的解释了Tree-shaking 的本意,本文所说的前端中的tree-shaking可以理解为通过工具"摇"我们的JS文件,将其中用不到的代码"摇"掉,是一个性能优化的范畴。具体来说,在 webpack 项目
阅读全文
mini-css-extract-plugin搭配optimize-css-assets-webpack-plugin
摘要:const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); module
阅读全文
Webpack HMR 原理解析
摘要:Hot Module Replacement(以下简称 HMR)是 webpack 发展至今引入的最令人兴奋的特性之一 ,当你对代码进行修改并保存后,webpack 将对代码重新打包,并将新的模块发送到浏览器端,浏览器通过新的模块替换老的模块,这样在不刷新浏览器的前提下就能够对应用进行更新。例如,在
阅读全文
webpack loader的加载顺序(从右向左,从下向上)
摘要:函数组合 先介绍一个概念,函数组合:函数组合是函数式编程中非常重要的思想,它的实现的思路也没有特别复杂。 函数组合的两种形式(JavaScript函数式编程之函数组合函数compose和pipe的实现) 有两种函数组合的方式,一种是pipe,另一种是compose。前者从左向右组合函数,后者方向相反
阅读全文