? 目录
- webpack 5 实战 01.起步 - webpack5 构建如果 从0到1 实现 js构建
- webpack 5 实战 02.特征 - 基于 webpack 5 新特征实现编译
- webpack 5 实战 03.拓展 - 基于现有的体系 如何插拔式实现 vue react svelte 等编译
- webpack 5 实战 04.组合 - 封装 cli,统一构建环境
- webpack 5 实战 05.Module Federation - 基于构建cli的 Module Federation 实现
? 结构
.
├── 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 5
- Babel 7
- PostCSS 8
- ESlint
- Commitlint
? 依赖
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自动格式化
? 新特征
- es5兼容性配置
- 实验性功能
? 注意
terser-webpack-plugin
默认支持pnp-webpack-plugin
暂不支持url-loader
&file-loader
用 asset 进行取代optimization.minimizer
设置方式[new 自定义插件(), '...']
webpack-dev-server@4.0
目前还在开发状态、稳定性有待提升、不支持liveload
的overlay
eslint-webpack-plugin
取代eslint-loader
? 作者
- Ken.Xu
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!