![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Webpack
文章平均质量分 71
Webpack
翘阳啦
只有不断学习,才不会落后!做笔记的博客
展开
-
【Webpack5笔记】loader的概念以及手写clean-log-loader、banner-loader、babel-loader和file-loader
Loader概念帮助 webpack 将不同类型的文件转换为 webpack 可识别的模块。Loader的执行顺序pre:前置loadernormal:普通loaderinline:内联loaderpost:后置loader执行的优先级:pre>normal>inline>post相同优先级执行顺序为:从右到左,从下到上// 此时loader执行顺序:loader3 - loader2 - loader1module: { rules: [..原创 2022-06-01 10:23:08 · 341 阅读 · 1 评论 -
【Webpack5笔记】Webpack高级配置---优化代码运行性能(Code Split、Preload/Prefetch、Network Cache、Core-js和PWA)
一、Code Split(代码分割)多入口为什么使用:打包代码时会将所有 js 文件打包到一个文件中,体积太大了。我们如果只要渲染首页,就应该只加载首页的 js 文件,其他文件不应该加载。所以我们需要将打包生成的文件进行代码分割,生成多个 js 文件,渲染哪个页面就只加载某个 js 文件,这样加载的资源就少,速度就更快。代码分割(Code Split)主要做了两件事:分割文件:将打包生成的文件进行分割,生成多个 js 文件。 按需加载:需要哪个文件就加载哪个文件。把需要的包下..原创 2022-05-31 14:38:18 · 431 阅读 · 0 评论 -
【Webpack5笔记】Webpack高级配置---减少代码体积(Tree Shaking、Babel和Image Minimizer )
一、Tree Shaking为什么使用:开发时我们定义了一些工具函数库,或者引用第三方工具函数库或组件库。如果没有特殊处理的话我们打包时会引入整个库,但是实际上可能我们可能只用上极小部分的功能。这样将整个库都打包进来,体积就太大了。Tree Shaking:移除 JavaScript 中的没有使用上的代码它依赖ES MoudleWebpack 已经默认开启了这个功能,无需其他配置二、Babel为什么使用:Babel 为编译的每个文件都插入了辅助代码,使代码体积过大!Babe.原创 2022-05-30 21:12:35 · 586 阅读 · 1 评论 -
【Webpack5笔记】Webpack高级配置---提升打包构建速度(HMR、Oneof、Include/Exclude、Cache和Thead)
一、HotModuleReplacement(HMR/热模块替换)为什么要用到这个(只在开发模式): 开发时修改了其中一个模块代码,Webpack 默认会将所有模块全部重新打包编译,速度很慢。所以当需要做到修改某个模块代码,就只有这个模块代码需要重新打包编译,其他模块不变,这样打包速度就能很快。HMR:在程序运行中,替换、添加或删除模块,而无需重新加载整个页面。基本配置module.exports = { // 其他省略 devServer: { ho...原创 2022-05-30 20:54:46 · 697 阅读 · 0 评论 -
【Webpack5笔记】Webpack高级配置---提升开发体验
SourceMap Devtool | webpack 中文文档 开发时我们运行的代码是经过 webpack 编译后的,例如下面这个样子:/* * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development"). * This devtool is neither made for production nor for readable output files....原创 2022-05-30 16:06:41 · 548 阅读 · 1 评论 -
【Webpack5笔记】处理打包各种资源(css资源、less资源、图片资源、字体图标、js资源(ESlint和Babel)、html资源)
webpack中文文档webpack 中文网首先安装css-loadernpm install --save-dev css-loader想要webpack打包资源,需要在主文件中引入css文件import css from 'file.css';在webpack.config.js中,因为使用了style-loader,也需要安装npm install style-loadermodule.exports = { module: { rules: [ .原创 2022-05-30 12:43:18 · 672 阅读 · 2 评论 -
【Webpack】webpack5基本配置
5大核心概念1、entry(入口)指示webpack从哪个文件开始打包2、output(输出)指示webpack打包完的文件输出到哪里去,如何命名3、loader(加载器)webpack本身只能处理js、json等资源,其他资源需要借助loader、webpack才能解析4、plugins(插件)扩展webpack的功能5、mode(模式)开发模式:development生产模式:production准备Webpack配置文件在项目根目录中新建webp原创 2022-05-29 17:03:08 · 722 阅读 · 0 评论