webpack 常用loader、plugin
主流框架脚手架
-
Vue 脚手架 vue-cli
-
React 脚手架 creact-react-app
-
Taro 脚手架 taro-cli
常用依赖包
-
cross-env：跨平台（windows、linux，...）设置环境变量工具，用来设置或修改环境变量
-
env-cmd：用于在命令行中运行命令时加载环境变量的工具
- -f .env.prod：指定加载的环境文件.env.prod，并加载其中的环境变量
-
web-vitals：项目性能测试
-
@commitlint/config-conventional 是一个预定义的 commitlint 配置，它定义了一组常见的 Git 提交信息格式规范
常用的第三方库
-
lodash
-
moment.js
-
axios
-
Antd、Element UI
-
Redux、React Router、Vuex、Vue Router
常用的babel插件
-
transform-remove-console 移除代码中的 console.log
-
@babel/preset-env：根据目标浏览器或运行环境自动选择需要转换的语法和特性
常用的webpack插件
-
progress-bar-webpack-plugin 显示 Webpack 构建状态信息
-
useless-files-webpack-plugin：项目无用文件清理插件
-
webpack-bundle-analyzer 优化包体：https://juejin.cn/post/7035951233907032077
-
terser-webpack-plugin：js文件压缩
-
当项目过大时，可开启 parallel 参数，增加进程
-
cache: true，可以缩短打包时间
-
-
speed-measure-webpack-plugin：看到整个打包耗时、每个 Plugin 和 Loader 耗时，可快速定位可优化的Plugin
-
react-refresh-webpack-plugin：热更新插件
- create react app 集成了热更新插件，最新版默认启用
-
html-webpack-plugin：根据模板生成 HTML 文件，并自动将打包后的 JS 和 CSS 文件引入到 HTML 文件中
-
create react app 集成并使用了插件，会以public的index.html 作为模板
-
插件本身也有对html 压缩，html-webpack-plugin 支持修改minify 自定义压缩设置
-
-
commons-chrunks-webpack-plugin：拆包插件
- webpack4 默认内置了CommonsChunkPlugin，webpack5推荐用splitChunks替代
-
css-minimizer-webpack-plugin：css文件压缩
-
mini-css-extract-plugin：将css 从js文件中分离
-
purgecss-webpack-plugin：对 CSS Tree Shaking，打包时去除无用css
-
module-federation-import-remote：实现远程模块导入的插件，微前端神器
常用的loader
-
babel-loader：把 ES6+转换成 ES5
- cacheDirectory:true 可以缩短打包时间，create react app时， 默认为true
-
sass-loader、less-loader
-
sass-resources-loader：将指定的 Sass 文件作为全局的变量文件引入
-
postcss-loader 将CSS 代码转换为符合标准的 CSS 代码
-
eslint-loader ESLint 检查 JavaScript 代码
-
thread-loader：多线程提高webpack 构建速度
- 适用于大项目启动慢的情况，因为引入thread-loader本身也需要构建时间
目前已知的webpack5已集成的内置插件，与第三方插件相似的有哪些？
-
Code Splitting：optimization.splitChunks 分包，类似splitChunksPlugin
-
Tree Shaking：mode：production 默认开启
-
Asset Modules：处理静态资源，类似file-loader 和 url-loader
-
持续化缓存：cache， 类似cache-loader
-
ModuleFederationPlugin：应用程序之间的模块共享，微前端的更好方案。类似ModuleFederationPlugin
-
HotModuleReplacementPlugin ：热更新，内置 webpack-dev-server 和 webpack-hot-client
-
TerserWebpackPlugin：js代码压缩，内置最新版terser-webpack-plugin
-
HtmlWebpackPlugin：html代码压缩，内置最新版html-webpack-plugin
-
ProgressPlugin：构建进度插件，类似于progress-bar-webpack-plugin
webpack5 的其他内置功能
-
DefinePlugin：用于定义全局常量，也可以将环境变量赋值为全局常量，在JS中使用
-
环境变量可从scripts 的命令行获取，即process.env.变量名。或env-cmd 读取环境文件的变量
-
cross-env 可以保证命令行在跨平台正常执行
-
-
ProvidePlugin：全局注入变量或模块，如全局注入lodash 的get方法
new webpack.ProvidePlugin({ $_get: ['lodash','get'] });
webpack-bundle-analyzer
analyze-bundle-size.js脚本
const fs = require('fs')
function analyzeBundleSize(reportFilename, maxSize) {
const limit = maxSize * 1024
const report = JSON.parse(fs.readFileSync(reportFilename, 'utf8'))
const invaildChunk = []
for (const chunk of report) {
if (chunk.gzipSize > limit) {
invaildChunk.push({
name: chunk.label,
size: `${Math.round(chunk.gzipSize / 1024)}KB`,
})
}
}
if (invaildChunk.length) {
console.log(`The following bundles exceed the ${maxSize}KB limit`)
console.table(invaildChunk)
process.exit(1) // 非零的退出码表示错误
}
}
const reportFilename = process.argv[2]
const maxSize = Number(process.argv[3])
analyzeBundleSize(reportFilename, maxSize)
.gitlab-ci.yml执行脚本
node analyze-bundle-size.js ./analyzer/bundle-size-report 300
webpack loader 配置示例
module.exports = {
...
module: {
rules: [
{
test: /\.(css|less|s[a|c]ss)(\?.*)?$/i,
use: [
{
loader: process.env.NODE_ENV === 'development' ? 'style-loader' : miniCssExtractPlugin.loader
},
],
},
{
test: /\.css$/i,
use: [
{
loader: 'css-loader'
},
{
loader: 'postcss-loader'
},
],
},
{
test: /\.less$/i,
use: [
{
loader: 'css-loader'
},
{
loader: 'postcss-loader'
},
{
loader: 'less-loader'
},
],
},
{
test: /\.s[a|c]ss$/i,
use: [
{
loader: 'css-loader'
},
{
loader: 'postcss-loader',
options: {
plugins: [
require('autoprefixer')
]
}
},
{
loader: 'sass-loader'
},
],
},
],
},
}
评论区