15
GitHub - luoxue-victor/webpack-box: 我有一个梦想,就是将所有webpack相关的最佳实...
source link: https://github.com/luoxue-victor/webpack-box
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
webpack 工程师的自我修养
本来想要做一个大型项目的 webpack 教程,但是我发现还可以做更多的事情,所以这里我要将这个项目做成 webpack 手册,您可以来这里找到任何想要的 webpack 配置
如果想要从头系统学习,可以切换到不同分支上,我把每课时的内容都分别切成了不同的分支,您可以在这些分支上自由尝试
本项目诚邀所有共建者,一起来完善,无论你提供了多少的代码都可以被展示在贡献者名单内!
所有课题
点击关闭/打开所有课题- 课题 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
安装
点击关闭/打开安装# 全局安装 npm i -g webpack-box # 全局安装使用 # 本地调试 npm link # 建立软连接,可以使用 webpack-box 命令
使用
点击关闭/打开使用# --- 项目构建 --- 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 端运行 # --- 执行lint修复功能 --- webpack-box lint eslint # 自动修复 eslint 错误 webpack-box lint tslint # 自动修复 tslint 错误 webpack-box lint stylelint # 自动修复 stylelint 错误 # 切换 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
在 package.json 中使用
{ "scripts": { "dev": "webpack-box dev", "build": "webpack-box build", "dll": "webpack-box dll", "build:ssr": "webpack-box build:ssr", "ssr:server": "webpack-box ssr:server" } }
所有配置
点击关闭/打开所有配置- 打包分析
- 开启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中添加中间件
- eslint-loader 配置
- 提取 manifest
- optimization 优化配置
- 样式表配置
- stylelint 配置
- 设置 style 全局变量
- 多线程配置
- tslint 配置
扩展配置
点击关闭/打开扩展配置 在根目录下添加 `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: 8888, mock: true, env: { MY_ENV: 'my-env' }, 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) { } } }
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK