webpack 5 实战 01.起步 - efoxTeam/webpack-5-practice GitHub Wiki
本系列文章主要 由浅入深 介绍如利用 webpack 5、babel、sass、postcss、webapck-chain 等模块、库实现生产项目构建的实战
📋 结构
.
├── commitlint.config.js [代码提交规范]
├── package.json [包依赖]
├── postcss.config.js [postcss 独立配置]
├── public [静态文件]
├── src [开发代码]
├── template [html favicon 等模板文件]
└── webpack [配置文件]
💻 使用指令规划
- Webpack 5 Practice 仓库
- 获取
git clone https://github.com/efoxTeam/webpack-5-practice.git
- 安装
yarn
- 调试
yarn dev
- 构建
yarn build
- 正式环境调试
yarn start
代码实现
"scripts": {
"dev": "cross-env NODE_ENV=development DEPLOY_ENV=dev webpack serve --config ./webpack/config.js",
"build": "cross-env NODE_ENV=production DEPLOY_ENV=prod webpack --config ./webpack/config.js",
"start": "serve ./dist --cors -S -p 8000"
},
其中 NODE_ENV
为构建环境 DEPLOY_ENV
为部署环境,支撑.dotenv
🛠 功能
🤝 依赖
webpack
webpack
webpack-cli
- webpack 命令行webpack-dev-server
- webpack 开发服务webpack-chain
- webpack 灵活配置可以实现插件化配置
cross-env
- 跨平台环境命令webpackbar
- Nuxt webpack 进度显示插件
Babel
@babel/core
- 将ES6+转换为向后兼容的JavaScript@babel/plugin-proposal-class-properties
- 直接在类上使用属性@babel/preset-env
- 智能环境配置
Loaders
babel-loader
- 使用 Babel 和 webpack 转译 JavaScript 文件sass-loader
- SCSS 转译 CSSsass
- Dart版本的 Sass
postcss-loader
- 用postcs处理CSSpostcss-preset-env
- PostCSS 兼容环境默认配置
css-loader
- 对@import
和url()
进行处理style-loader
- 把 CSS 插入到 DOM 中
Plugins
clean-webpack-plugin
- 清除已构建的产物copy-webpack-plugin
- 复制文件到生产目录html-webpack-plugin
- 根据模板生成HTMLmini-css-extract-plugin
- 将 CSS 提取到单独的文件中,为每个包含 CSS 的 JS 文件创建一个 CSS 文件,并且支持 CSS 和 SourceMaps 的按需加载css-minimizer-webpack-plugin
- 压缩CSS 文件 取代optimize-css-assets-webpack-plugin
dotenv-webpack
- 不同部署环境切换到不同配置eslint-webpack-plugin
- eslint自动格式化
🍄 新特征
🎯 注意
webpack5 对一下内容的相关说明
持续整理中
terser-webpack-plugin
默认支持pnp-webpack-plugin
暂不支持url-loader
&file-loader
用 asset 进行取代optimization.minimizer
设置方式[new 自定义插件(), '...']
[email protected]
目前还在开发状态、稳定性有待提升、不支持liveload
的overlay
eslint-webpack-plugin
取代eslint-loader