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"
最新文章
- 获取某个Group中所有对象的DisplayName
- 使用Powershell在Microsoft Azure中创建Virtual Machine
- ffmpeg学习笔记
- Zsh安装
- php-fpm 相关
- python - bilibili(二)出错的解决办法
- Navicat连接报错:cannot load OCI DLL,126
- RocketMQ源码分析之RocketMQ事务消息实现原理上篇(二阶段提交)
- Qt文件系统之QFile
- [Android][Framework] 添加系统服务
- Kafka Java API获取非compacted topic总消息数
- Docker容器学习与分享11
- clojure中符号symbols 和变量vars的正确理解
- 提交代码到自己的github仓库
- maven(11)-聚合多模块
- 使用vue封装一个tab栏切换的左侧导航栏的公共组件
- [移动云计算开发 01] 解决 windows 7 安装设置 nginx 出现端口占用的问题
- IIS调试技术之 Debug Diagnostic (调试诊断)
- JDK源码学习笔记——Iterable/Iterator实现原理
- 11-EasyNetQ之多态发布和订阅
热门文章
- Git(6)-- 记录每次更新到仓库(git clone、status、add、diff、commit、rm、mv命令详解)
- 【笔记】求数据前n个主成分以及对高维数据映射为低维数据
- JSONObject和JSONArray的使用
- 在PyQt中构建 Python 菜单栏、菜单和工具栏
- git 使用代理出现 LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443 错误
- spring之自定义注解
- ros-kinetic install error: sudo rosdep init ImportError: No module named 'rosdep2'
- tcmalloc jemalloc glibc内存分配管理模块性能测试对比
- JavaScript之创建对象的模式
- Shell 脚本如何输出帮助信息?