Webpack 进阶用法

最新推荐文章于 2023-12-07 10:01:06 发布
最新推荐文章于 2023-12-07 10:01:06 发布
阅读量415 收藏 3
点赞数 1
分类专栏： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43550660/article/details/105423284
版权

Webpack 进阶用法

当前构建时的问题

  • 每次构建的时候不会清理目录，造成构建的输出目录output文件越来越多
通过npm script清理构建目录(并不优雅的处理方式)
  • rm -rf ./dist && webpack
  • rimraf ./dist && webpack
自动清理构建目录

  • 避免构建前每次都需要手动删除dist

  • 使用clean-webpack-plugin

    • 默认会删除output指定的输出目录
  • plugins:[
	new CleanWebpackPlugin()
]

CSS增强

CSS兼容添加前缀
  • IE ==> Trident(-ms)
  • Geko(-moz) 火狐
  • WebKit(-webkit) 谷歌
  • Presto(-0)欧鹏

使用PostCSS插件autoprefixer自动补齐CSS3前缀

  • npm i postcss-loader autoprefixer -D

  • 使用autoprefixer插件

  • 根据Can I Use规则 https://caniuse.com/

  • module :{
        rules:[           
            {
                test:/.less$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader',
                    {
                    	loader:'postcss-loader',
                    	  //参数
                    	  options:{
                    	 	plugins:()=>{
                    	 	//引入
                    	 		require('autoprefixer')({
					//可以设置 autoprefixer  兼容浏览器版本
					//>1% 使用人数占比
					//ios7 兼容ios7版本以上 版本
                    browsers:['last 2 version','>1%,'ios7']
                    	 		})
                    	 	}
                    	}
                    }
                ]
            },
         

        ]
    }
将移动端CSS px自动转换成rem
CSS媒体查询实现 响应式布局
  • 缺陷：需要写多套适配样式代码
使用px2rem-loader
  • 页面渲染时计算根元素的font-size值
    • 可以使用手淘的lib-flexible
    • github.com/amfe/lib-flexible
module :{
        rules:[           
            {
                test:/.less$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader',
                    {
                    	loader:'postcss-loader',
                    	  //参数
                    	  options:{
                   			remUnit:75,
                            remPrecision:8//转换成rem 后面的小数点位数
                    	}
                    }
                ]
            },        
        ]
    }
资源内联的意义
  • 代码层面
    • 页面框架的初始化脚本
    • 上报相关打点
    • css内联避免页面闪动
请求层面：减少http网络请求数
  • 小图片或者字体内联（url-loader）
HTML 和 JS内联
  • raw-loader内联html与js 安装版本为：npm i raw-loader@0.5.1 -D
css内联
  • 方案一：借助style-loader
  • 方案二：html-inline-css-webpack-pulugin
module :{
        rules:[           
            {
                test:/.less$/,
                use:[                    
                    {
                    loader:'style-loader',
                    //参数
                        options:{
                            inserAt:'top',//样式插入到`<head>`
                            singleton:true,//将所有的`style`标签合并成一个
                        }
                    }
                    'css-loader',
                    'less-loader',
                ]
            },        
        ]
    }

多页面应用（MPA）概念

每一次页面跳转得时候，后台服务器都会返回一个新的html文档，这种类型得网站也就是多页网站，也叫做多页应用

多页面打包基本思路

每个页面对应一个entry,一个html-webpack-plugin

缺点：每次新增或删除页面需要修改webpack配置

module.exports = {
	entry :{
		index:'./src/index.js',
		search:'./src/search.js'
	}
}

动态获取entry和设置 html-webpack-plugin数量

利用 glob.sync

  • entry:glob.sync(path.join(_dirname,'./src/*/index.js'))
module.exports = {
	entry :{
		index:'./src/index/index.js',
		search:'./src/search/index.js'
	}
}

//约定：把所有得页面都放在 src 目录下面，每个页面得人口文件都命名为index.js文件
  • 通过glob多页面打包
npm i glob
const glob = require('glob')

const setMPA = () =>{
	const entry = {};
	const htmlWebpackPlugins = [];
	const entryFiles = glob.sync(path.join(__dirname,'./src/*/'));//匹配src目录下所有页面内容
	Object.keys(entryFiles).map(index=>{
		const entryFire = entryFiles[index];
		const match = entryFiles.mach(/src\(.*)\/index\.js/)
		const pageName = match && match[1]
		entryFiles[pageName] = entryFiles;
		htmlWebpackPlugins.push(
            new HtmlWebpackPlugin({
            template:path.join(_dirname,`src/${pageName}/index.html`),
            filename:`${pageName}.html`, //指定打包出来之后得文件名称
            chunks:['search'],
            inject:true,
            minify:{
                html:true,
                collapseWhitespace:true,
                preserveLineBreaks:false,
                minifyCSS:true,
                minifyJS:true,
                removeComments:false
            }
        })
	})
	return {
		entry,
		htmlWebpackPlugins
	}
}
使用source map

作用：通过source map定位到源代码

开发环境开启，线上环境关闭

  • 线上排查问题得时候可以将sourcemap上传到错误监控系统
source map关键字
  • eval:使用eval包裹模块代码
  • source map：产生.map文件
  • cheap：不包含列信息
  • inline：将.map作为DataURL嵌入，不单独生成.map文件
  • module：包含loader的sourcemap
提取页面公共资源
基础库基础
思路：将react 、 react-dom基础包通过引入cdn引入，不打入bundle中
方法：使用html-webpack-externals-plugin
利用SplitChunksPlugin进行公共脚本分离
  • Webpack4内置的，替代CommonsChunkPlugin插件
  • chunks参数说明：
    • async异步引入的库进行分离（默认）
    • initial:同步引入的库进行分离
    • all：所有引入的库进行分离（推荐）
module.exports = {
	optimization:{
		splitChunks:{
			chunks:'async',
			minSize:30000,
			maxSize:0,
			minChunks:1,
			maxAsyncRequests:5,
			maxInitialRequests:3,
			automaticNameDelimiter:'~',
			name:true,
			cacheGroups:{
				vendors:{
					test:/[\\/]node_modules[\\/]/,
					priority:-10
				}
			}
		}
	}
}
利用**SplitChunksPlugin**分离基础包

test：匹配出需要分离的包

module.exports = {
  //...
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
   		  name:'vendors',
          chunks: 'all'
        }
      }
    }
  }
};
tree shaking(摇树优化)

概念：1个模块可能有多个方法，只要把其中的某个方法使用到了，则整个文件都会被达到bundle里面去，tree shaking 就是只把用到的方法打入bundle,没用到的方法会在uglify阶段被擦除掉

使用：webpack默认支持，在.babelrc里设置modules:false即可.production mode的情况下默认开启

要求：必须是ES6的语法，CJS的方式不支持

DCE (Elimination)

代码不会被执行，不可到达

代码执行的结果不会被用到

代码只会影响死变量（只写不读）

tree shaking原理

利用ES6模块的特点：

  • 只能作为模块顶层的语句出现
  • import模块名只能是字符串常量
  • import binding是immutable的

代码擦除：ugkify阶段删除无用代码

ScopeHoisting使用和原理分析

现象：构建后代码存在大量闭包代码

模块转换分析

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eoaFSTUg-1586446111477)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200408234303736.png)]

结论：

  • 被webpack转换后的模块会带上一层包裹
  • import会被转换成__webpack_require
进一步分析webpack的模块机制

分析：

  • 打包出来的是一个llFE(匿名闭包)
  • modules是一个数组，每一项是一个模块初始化函数
  • __webpack_require用来加载模块，返回module.exports
  • 通过WEBPACK_REQUIRE_METHOD(0)启动程序
scope hoisting原理

原理：将所有模块的代码按照引用顺序放在一个函数作用域里，然后适当的重命名一些变量以防止变量名冲突

对比：通过scope hoisting可以减少函数声明代码和内存开销

scope hoisting

webpack mode为production默认开启

必须是ES6语法，CJS不支持

代码分割得意义

对于大得web应用来说，将所有的代码都放在一个文件中显然是不够有效的，特别是当你的某些代码块实在某些特殊的时候才会被用到，webpack有有一个功能就是将你的代码库分割成chunks（语块），当代码运行到需要它们的时候在在加载

适用的场景：

  • 抽离相同代码到一个共享块
  • 脚本懒加载，是的初始下载的代码更小
懒加载JS脚本的方式

ComonJS:require.ensure

ES6:动态import(目前还没有原生支持，需要babel转换)

如何使用动态import
安装babel插件

npm install @babel/plugin-syntax-dynamic-import --save-dev

{
	"plugins":["@babel/plugin-syntax-dynamic-import"]
}
webpack 和ESLint结合

安装husky

npm i husky --seve-dev

增加npm script，通过lint-staged增量检查修改的文件

"script":{
	"precommit":"lint-staged"	
},
"lint-staged":{
	"linters":{
		"*.{js.scss}":["eslint--fix","git add"]
	}
}
新建项目 时候 webpack 与 ESLint集成
  • 使用eslint-loader,构建时检查JS规范
module.exports = {
  //...
  module: {
    rules: {
  	 {
  	 	test:/\.js$/,
  	 	exclude:/node_modules/,
  	 	use:[
  	 		"babel-loader",
  	 		"eslint-loader"
  	 	]
  	 }
    }
  }
};
webpack打包库和组件

webpack除了可以用来打包应用，也可以用来打包JS库

实现一个大整数加法库的打包
  • 需要打包压缩版和非压缩版本
  • 支持AMD / CJS / ESM模块引入
    • ESM=>import * as test from 'test'
    • CJS =>const test = require('test')
    • AMD =>require(['test'],function(test){ // ...})
如何将库暴露出去
  • library:指定库的全局变量
  • libraryTarget:支持库引入的方式
module.exports = {
	mode:'none',
	entry :{
		"large-number":'./src/index/index.js',
		"large-number.min":'./src/search/index.js'
	},
	output:{
		filename:"[name].js",
		library:'largeNumber',
		libraryExport:'default',
		libraryTarget:'umd'
	},
	optimization:{
		minimize:true,
		minimizer:[
			new TerserPlugin({
				include:/\.min\.js$/  //通过include 设置只压缩 min.js 结尾的文件
			})
		]
	}
}
设置人口文件

package.json 的 main字段为 index.js main:index.js

if(process.env.NODE_ENV === "production"){
	module.exports = require("./dist/large-number.min.js")
}else{
	module.exports = require("./dist/large-number.js")
}
webpack实现ssr打包
服务端渲染ssr是什么

渲染：HTML + CSS + JS +Data==>渲染后的HTML

服务端：

  • 所有模板等资源都存储在服务端
  • 内网机器拉取数据更快
  • 一个HTML返回所有数据
浏览器和服务器交互流程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lqQvoiaX-1586446111479)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200409222304222.png)]

客户端渲染 vs服务端渲染

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oMGMtNN9-1586446111480)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200409222548020.png)]

总结：服务端渲染（SSR）的核心是减少请求

ssr的优势
  • 减少白屏的时间
  • 对于SEO友好
SSR代码实现思路
  • 服务端
    • 使用react-dom / server的 renderToString方法将React组件渲染成字符串，因为在服务端是没有window这些对象
    • 服务端路由返回对应的模板
  • 客户端
    • 打包出针对服务端的组件
webpack ssr打包存在的问题
浏览器的全局变量（Node.js中没有document,window）
  • 组件适配：将不兼容的组件根据打包环境进行适配
  • 请求适配：将fetch或者ajax发送请求的写法改成isomorphic-fetch或者axios
样式问题（Node.js无法解析css）
  • 方案一：服务端打包通过ignore-loader忽略掉css的解析
  • 方案二：将style-loader替换成isomorphic-style-loader
如何解决SSR打包之后样式不显示的问题

使用打包出来的浏览器端html为模板

设置占位符，动态插入组件

比如 iview table 在查看网页源代码之后会出现很多<!---->,就是占位从而显示样式

首屏数据如何处理

服务端获取数据

替换占位符

优化构建时命令行的显示日志

统计信息 stats

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g0kvygEF-1586446111481)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200409230846573.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q84SZkaE-1586446111482)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200409231203671.png)]

如何判断构建是否成功

在CI / CD 的 pipline 或者发布系统需要知道当前构建状态

每次构建完成后输入echo $ 获取错误吗

构建异常和中断处理

webpack4之前的版本构建失败不会抛出错误码（error code）

Node.js中的process.exit规范

  • 0 表示成功完成，回调函数中，err为null

  • 非0 表示执行失败，回调函数中，err 不为null，err.code就是传给exit的数字

如何主动捕获并处理构建错误

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OPuMUzFL-1586446111483)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200409232612853.png)]

秃如其来的秃头
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack性能优化
doomliu的博客
05-16 869
性能分析 1. 统计基本信息 使用webpack内置的stats 可以统计出构建时间、构建资源清单及资源大小等信息 使用方法： 1. cli webpack --env production --json > stats.json 2. node API webpack(config, (err, stats) => { console.log(stats); }); 2. 速度分析 使用speek-measure-webpack-plugin 插件功能 分析出整个构建时间和每个loa
webpack打包优化进阶版
L_squan的博客
07-01 430
首先就是要在根目录下创建vue.config.js 1、设置静态资源路径否则 打包后会白屏 module.exports = { publicPath: "./", } 2、关闭生产环境下的sourceMap映射文件 能减少dist文件的3/4内存 sourceMap 但是有一点 关闭后 打包 的报错不能提示准确位置 productionSourceMap: false, 3、添加进度条 需要安装nprogress 在main.js下可以这样操作 // 导入NProgress, 包对应的J
html-webpack-externals-plugin：与html-webpack-plugin一起使用以使用预先打包的供应商捆绑包的Webpack插件
02-06
html-webpack-externals-plugin :police_car_light: 已淘汰 :police_car_light: 抱歉，该模块已不再维护，其功能已由jharris4， 和。 您可能会遇到问题，并且最近的Webpack项目尚未使用它。 与一起使用以使用预先打包的供应商捆绑包。 这个怎么运作 这个插件非常简单，只是封装了另外两个Webpack插件来完成繁重的工作。 它： 在运行时修改Webpack配置，以将供应商模块添加到属性。 运行将您的供应商模块资产复制到输出路径。 运行将您的供应商模块捆绑包添加到HTML输出中。 安装 npm install --save-dev html-webpack-externals-pl
项目打包浏览器 F12 在source设置不显示webpack包
最新发布
weixin_45859470的博客
12-07 629
以vue-cli为例----vue.config.js 配置。
Webpack知识点整理
zhuang0911的博客
07-23 211
HMR-hot module replacement,客户端从服务端拉取更新文件，chunk需要更新的部分，（webpack dev sever）WDS向浏览器推送更新，带上构建的hash，客户端镜像资源对比，有差异即WDS发起Ajax请求获取更改内容，客户端拿到chunk进行增量更新，进行页面渲染。编译模块：递归中根据文件类型和loader配置，调用所有配置的loader对文件进行转换，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理。chunk文件改变，hash改变。
架构-webpack阶段笔记
weixin_45687657的博客
05-03 182
publicPath可以看作是对生成目录`dist`设置的虚拟目录(可以当做就是dist目录)，devServer首先从devServer.publicPath中取值，如果它没有设置，就取 `output.publicPath`的值作为虚拟目录，如果它也没有设置，就取默认值 `/`默认值是 ./src/index.js(./相对的目录是process.cwd(),就是运行的项目)，但你可以通过在 webpack configuration 中配置 entry 属性，来指定一个（或多个）不同的入口起点。
Webpack打包简教程
E_li_na的博客
05-14 3061
一、在本地安装webpack 安装的前提是安装了Node.js，使用 Node.js 最新的长期支持版本(LTS - Long Term Support)，是理想的起步。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能以及/或者缺少相关 package 包。 对于大多数项目，我们建议本地安装。 npm i --save-dev webpack npm i --save-...
webpack进阶——缓存与独立打包的用法
08-29
在本篇文章中，我们将介绍 Webpack 进阶中的缓存与独立打包的用法，帮助开发者更好地理解和使用 Webpack。 缓存与独立打包的用法 在开发过程中，我们经常需要将代码分离成不同的模块，以便于管理和维护代码。然而...
webpack初级进阶demo文件
10-03
这个“webpack初级进阶demo文件”正是为了帮助初学者更好地理解和掌握Webpack的工作原理和配置方法。 在学习Webpack时，你需要了解以下几个核心概念： 1. **Entry（入口）**：这是Webpack开始构建依赖图的起点。在...
前端Webpack5高级进阶教程.zip
12-14
通过本高级进阶教程，开发者将全面了解Webpack5的新特性，掌握高效的配置方法和优化技巧，从而在实际项目中更好地利用Webpack5提升开发效率和项目性能。同时，对于微前端架构的实践也会有深入理解，为构建大型复杂...
使用webpack 4打包项目—进阶篇之loader
01-08
使用webpack 4打包项目—进阶篇之loader 文章目录使用webpack 4打包项目—进阶篇之loader1. html-webpack-plugin2. 处理样式的loader包2.1 css-loader2.2 less-loader2.3 sass-loader3. 处理url的loader3.1 url-...
webpack 笔记
qq_38427709的博客
11-02 256
webpack url-loader 小图片可以通过url-loader转换成base64 文件监听 在修改页面后要立马刷新，而不是手动去构建，可以通过文件监听来完成。 启动webpack命令时，带上 --watch参数 在webpack.config.js 中设置watch: true 缺点： 需要手动刷新 原理是 ： 轮询判断文件的最后编辑时间是否变化 某个文件发生了变化，并不会立刻告诉监听者，而是先缓存起来，等aggregateTimeout module.export = { ​ // 是否监听
webpack打包后引用cdn的js_webpack系列-externals配置使用（CDN方式引入JS）
weixin_35779845的博客
01-17 670
如果需要引用一个库，但是又不想让webpack打包(减少打包的时间)，并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用(一般都以import方式引用使用)，那就可以通过配置externals。这样做的目的就是将不怎么需要更新的第三方库脱离webpack打包，不被打入bundle中，从而减少打包时间，但又不影响运用第三方库的方式，例如import方式等。方式一...
webpack 中公共模块，基础库, 多次使用的公共方法单独抽离，以减少包体积和打包时间
冲锋
09-08 1785
1. 使用html-webpack-externals-plugin 插件 安装html-webpack-externals-plugin yarn add html-webpack-externals-plugin 配置 webpack.config.js（配置完之后页面自动引入） 演示使用CDN 链接 const HtmlWebpackExternalsPlugin =...
Webpack提取页面公共资源
越陌度阡
01-15 1987
在做React开发时，经常需要引入react和react-dom基础库，这样在打包的时候速度就会比较慢，这种情况下我们可以将这些基础库忽略掉，将它们通过CDN的方式直接引入，而不打包到bundle文件里面去。此插件是Wabpack4内置的，无需安装，用于替代CommonsChunkPlugin插件。
webpack进阶篇（十四）：自动清理构建目录
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
06-23 379
说明 玩转webpack课程学习笔记。 bundle，chunk，module bundle：打包最终生成的文件 chunk：每个chunk是由多个module组成，可以通过代码分割成多个chunk。 module：webpack中的模块（js、css、图片等等） 当前构建时的问题 每次构建的时候不会清理目录，造成构建的输出目录 output 文件越来越多。 通过 npm scripts 清理构建目录 rm -rf ./dist && webpack rimraf ./dist &a
手动搭建webpack环境的分离
票票的博客
05-13 204
config/index.js const path = require("path"); const config = { entryPath: path.join(__dirname, "../src/index.js"), development: { mode: "development", port: 8689, h...
Webpack2 完整踩坑教程(二)
github_37937865的博客
08-07 694
本文基于NODEJS环境，nodejs的安装参考线上的流程：https://nodejs.org/en/ 。Webpack的核心哲学思想 1.一切都是模块——就像js文件可以视作“模块”一样，其他所有的一切（CSS，图片，HTML）都可以被视作模块，通过require加载。。 2.模块加载器会把所有的模块最终打包生成一个巨大的“bundle.js”文件，并且会一直不停进行加载！所以Webpa
webpack解读5（build。）
weikehang的博客
01-15 1455
// 设置process.env.NODE_ENV process.env.NODE_ENV = 'production' //引入ora,可以实现loading效果 var ora = require('ora'); //引入webpack模块 var webpack = require('webpack'); //引入path模块 var path = require('path'); //
webpack入门进阶与调优pdf
11-30
《webpack入门进阶与调优pdf》是一本关于webpack打包工具的学习与实践指南。在这本书中，作者从入门到进阶再到调优完整地介绍了webpack的使用和优化方法。 首先，书中详细介绍了webpack的基本概念和工作原理。通过学习这些内容，读者可以了解webpack是如何将各种资源打包在一起，并生成一个或多个最终的静态文件的。同时，书中还讲解了webpack的配置文件，这是使用webpack的关键，通过配置文件，可以对打包过程进行灵活的控制。 然后，书中深入讲解了webpack的进阶用法。这部分内容包括但不限于：代码分割、动态导入、优化构建速度、模块热替换等。通过学习这些进阶用法，读者可以进一步提高项目的打包效率和性能。 最后，书中重点介绍了webpack的调优方法。通过对webpack打包过程中的性能瓶颈进行分析，可以根据具体情况对webpack进行调优，以提高项目的构建速度和运行效率。这部分内容对于有一定webpack使用经验的开发者来说尤为重要，可以帮助他们更好地优化自己的项目。 总的来说，《webpack入门进阶与调优pdf》是一本全面且有深度的webpack学习资料。对于想要学习webpack的开发者来说，可以通过阅读本书来系统地了解和掌握webpack的使用方法和优化技巧，提升自己的前端开发水平。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值