本项目经多多次迭代,终于迎来了第三次革命。以 @pkb/cli 脚手架为根本,创建/配置项目,以 webpack-box 为服务,打包/运行项目。以 workflow-ui 为平台,构建工作流。
- 📦 使用了目前最流行的打包工具 webpack,且使用 webpack-chain 进行 webpack 配置
- 🏈 约定式目录
- 🍁 多框架支持(vue/react/小程序等应有尽有)
- 💈 编译速度(支持一键开启 dll 等)
- 🚄 功能完备(可支持 webpack 所有最佳实践方案)
- 🎉 可插拔的插件系统(多项目管理)
- 🚀 定制化解决方案(webp、图片压缩、骨架屏等)
- 🧪 测试(单元测试、e2e)
- 📺 工具类集成(适配 adapter、callApp、无痕埋点、canvas 引擎等)
- 🔧 集成解决方案(提测、联调、部署)
- 🏠 监控(性能监控、异常错误监控)
- 🌴 界面化管理项目(待完成)
- 🍎 可扩展
@pkb/cli 为本项目的脚手架,可用来生成项目、添加插件、检查项目配置、升级更新等等,主要的功能就是对整体项目的管理。
- webpack-box 是一个对 webpack 进行了封装的开箱即用的项目。集成了 webpack 的各种优化,配置了 webpack 常用到的 loader 和 plugin,原则上您不需要做任何配置就可以使用。
- webpack-box 支持插件配置,您可以使用插件管理项目配置,可以多项目复用
- 您也可以当作参考手册,来这里找到任何想要的 webpack 配置
- 如果想要从头系统学习,可以切换到不同分支上,我把每课时的内容都分别切成了不同的分支,您可以在这些分支上自由尝试
- 项目计划 把 issue 整理到 project 中做好分类,并有计划的完成目标。
- 开发指南 如果想要一起开发的可以参考这里。
- 插件市场 目前已经完成的插件。
- 好的文章 把我觉得好的 webpack 的文章整理到我的 wiki 里,也可以在项目中点击 wiki 查看。
点击关闭/打开所有课题
- 课题 01:初探 webpack
- 课题 02:搭建可插拔的开发环境跟生产环境
- 课题 03:基础配置(loder,ts、babel、css、less、sass、postcss)等
- 课题 04:webpack 性能优化 1
- 课题 05: 手写一个 loader,实现可选链
- 课题 06:webpack 编译优化
- 课题 07:多页面配置
- 课题 08:手写一个 webpack plugin
- 课题 09:webpack 构建 ssr
- 课题 10:添加 eslint 并开启自动修复
- 课题 11:添加 stylelint
- 课题 12:添加 tslint
- 课题 13:配置别名
- 课时 14:升级 webpack5
- 课时 15:定义通用变量
- 课时 16:严格区分路径大小写
- 课时 17:加载资源 images、svg、media、fonts
- 课时 18:设置全局样式
- 课时 19:添加 webpack 配置检查命令
- 课时 20:添加 prefetch + preload
- 课时 21:增加 GraphQL Server
- 课时 22:开启 mock
- 课时 23:编写插件
- 课时 24:配置 react
- 课时 25:开发指南
- 课时 26:插件市场
- 课时 27:docker 配置及使用
点击关闭/打开安装
脚手架主要针对所有项目的管理,甚至可以针对任何非本工程的项目使用
# 全局安装 npm i -g @pkb/cli # 全局安装使用 pk create <project-name> # 创建项目(待完善) pk add <plugin> # 安装插件 pk info # 查看项目及系统配置
webpack-box 针对某个项目使用,可以在本地 npm script 内使用,也可以全局使用
npm i @pkb/webpack-box -D # 本地安装 npm i @pkb/webpack-box -g # 全局安装
点击关闭/打开使用
# --- 项目构建 --- webpack-box dev # 开发环境 webpack-box build # 生产环境 webpack-box dll # 编译差分包 webpack-box dev index # 指定页面编译(多页面) webpack-box build index # 指定页面编译(多页面) webpack-box build index --report # 开启打包分析 webpack-box build:ssr # 编译ssr webpack-box ssr:server # 在 server 端运行 # --- 切换 webpack 版本 --- webpack-box upgrade 5 # 可以切换到 webpack5/4 # --- 检查配置 --- webpack-box inspect > output.json # 导出所有配置到 output.json webpack-box inspect --rules # 查看所有 loader 列表 webpack-box inspect --rule babel # 查看指定 loader 配置 webpack-box inspect --plugins # 查看所有插件列表 webpack-box inspect --plugin mini-css-extract # 查看指定插件配置 # --- graphql --- webpack-box server:gql # graphql-server # --- 插件命令及安装 --- # npm i -D @pkb/plugin-eslint webpack-box eslint # 自动修复 eslint 错误 # npm i -D @pkb/plugin-tslint webpack-box tslint # 自动修复 tslint 错误 # npm i -D @pkb/plugin-stylelint webpack-box stylelint # 自动修复 stylelint 错误
在 package.json 中使用
{
"scripts": {
"dev": "webpack-box dev",
"build": "webpack-box build",
...
}
}点击关闭/打开所有配置
- 打包分析
- 开启gzip
- dll-plugin 配置
- EnvironmentPlugin 定义通用变量
- fork-ts-checher 检查ts类型
- friendly-errors-webpack-plugin 友好错误提示
- html-webpack-plugin 生成html
- mini-css-extract-plugin 配置
- PreloadWebpackPlugin
- ProgressBarPlugin 构建时添加进度条配置
- 别名配置
- 加载资源 images、svg、media、fonts
- babel-loader 配置
- 基础配置
- cache-loader 配置(webpack 5 弃用)
- CaseSensitivePaths 严格区分大小写
- dashboard 增加仪表盘配置
- devServer.before 在devServer中添加中间件
- 提取 manifest
- optimization 优化配置
- 样式表配置
- 设置 style 全局变量
- 多线程配置
- tslint 配置
- eslint-loader 配置
- react 配置
- stylelint 配置
Details
点击关闭/打开扩展配置
在根目录下添加 `box.config.js`,即可配置使用box.config.js
const path = require('path') function resolve (dir) { return path.join(process.cwd(), dir) } module.exports = function (config) { /** * @param {object} dll 开启差分包 * @param {object} pages 多页面配置 通过 box run/build index 来使用 * @param {function} chainWebpack * @param {string} entry 入口 * @param {string} output 出口 * @param {string} publicPath * @param {string} port 端口 * @param {object} eslint eslint 配置 * @param {object} stylelint stylelint 配置 * @param {object} eslint eslint 配置 * @param {object} alias 配置别名 * @param {object} env 配置通用变量,可以在 node 跟 web 之间共同使用 * @param {Boolean} filenameHashing 文件名是否使用 hash,当文件发生变动的时候 filename 才会改变 * @param {Boolean} css 配置 css * @param {Boolean} mock 开启 mock */ return { entry: 'src/main.js', output: 'dist', publicPath: '/common/', port: 8889, mock: true, env: { REACT: 'react' // 配置 react }, alias: { '@': resolve('src'), '@src': resolve('src') }, resources: { less: { patterns: [ path.resolve(__dirname, './src/global/*.less') ] }, scss: { patterns: [ path.resolve(__dirname, './src/global/*.scss') ] } }, css: { sourceMap: true, loaderOptions: { css: {}, less: { globalVars: { gray: '#ccc' } }, sass: {}, postcss: {}, stylus: {} }, isCssModule: false, // 是否对css进行模块化处理 needInlineMinification: false // 是否需要压缩css }, filenameHashing: true, eslint: { lintOnSave: true, // 开启运行时检测 extensions: ['js', 'jsx', 'vue'] // 默认 ['js', 'jsx'] }, tslint: { lintOnSave: true, // 开启运行时检测 useThreads: true }, stylelint: { lintOnSave: true // 开启运行时检测 // extensions: ['vue', 'htm', 'html', 'css', 'sss', 'less', 'scss'] }, // dll: { // venders: ['react'] // }, pages: { index: { entry: 'src/main.js', template: 'public/index.html', filename: 'index.html' }, index2: { entry: 'src/main.js', template: 'public/index2.html', filename: 'index2.html' } }, chainWebpack(config) {} } }