webpack4一些设置
一.sourceMap: 是一个映射关系,如果出错可以知道实际文件行数出错
在webpack.config.js设置属性
devtool: 'source-map'
在生产环境可以设置为(提醒错误比较全面)
devtool: 'cheap-module-eval-source-map'
在线上环境设置为(比较合适)
devtool: 'cheap-module-source-map'
https://segmentfault.com/a/1190000008315937
https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/
http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html
https://www.youtube.com/watch?v=NkVes0UMe9Y
二.@babel 将ES6自动转为ES5,还可设置自动加载ES6函数
三.Tree Shaking: 根据引用的内容自动选择加载内容 但因为是静态引入方式,所以功能只支持ES module,不支持COMMON JS
线上和线下模式打包引入结果不一样,线下模式会全部引入,但是在线上模式只会引入需要的模块.,就是判断只要引入一个模块,就会采用Tree Shaking方式进行打包
在package.json文件中
"sideEffects": ["@babel/polyfill"], 如果有需要特殊处理的模块,比如会忽略对 @babel/polyfill的处理
"sideEffects": false, 如果没有特殊处理的模块,就可以设为false
在webpack.config.js中
optimization: { usedExports: true }
四.Code Spliting
4.1t同步代码:
在配置文件webpack.config.js中
optimization: { splitChunks: { chunks: 'all' } }
4.2异步代码,会自动进行代码分割
首先安装插件 npm install --save-dev @babel/plugin-syntax-dynamic-import
在 .babelrc 中配置plugins加入
{ "plugins": ["@babel/plugin-syntax-dynamic-import"] }
4.3 SplitChunksPlugin配置
https://webpack.js.org/plugins/split-chunks-plugin/
五.Bundle Analysis 分析工具
https://webpack.js.org/guides/code-splitting/#bundle-analysis
可视化较强的是webpack-bundle-analyzer
六.懒加载
https://webpack.js.org/guides/code-splitting/#prefetchingpreloading-modules
七.CSS打包 MiniCssExtractPlugin
CSS合并和压缩: optimize-css-assets-webpack-plugin
PS:因为不支持HMR,所以只在production模式下使用这个CSS打包压缩功能
八.去除一些性能提醒
在webpack.config.js中添加属性
performance: false,
九.浏览器缓存caching
在配置文件output的打包目录的文件命名上加上 [contenthash] , 会根据文件内容进行hash
十.(在plugins中加入配置)自动引入模块 ProvidePlugin (因为在webpack中模块之间是隔离的)这样可以全局引入
new webpack.ProvidePlugin({ $: 'jquery', // ... });
十一.将模块js文件中的this指向window
需要先安装imports-loader
在webpack.config.js中加入代码
module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: [ { loader: "babel-loader", }, { loader: "imports-loader?this=>window" } ] } }
十二.全局变量
在package.json文件中 可以设置env全局变量,这样可以直接访问webpack.common.js这一个配置文件中而实现线上和线下模式
"dev-build": "webpack --config ./build/webpack.common.js", "dev": "webpack-dev-server --config ./build/webpack.common.js", "build": "webpack --env.production --config ./build/webpack.common.js"
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了