webpack 5 实战 - 01.起步

本系列文章主要 由浅入深 介绍如利用 webpack 5、babel、sass、postcss、webapck-chain 等模块、库实现生产项目构建的实战

🧳 目录

• 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 转译 CSS
  • sass - Dart版本的 Sass
• postcss-loader - 用postcs处理CSS
  • postcss-preset-env - PostCSS 兼容环境默认配置
• css-loader - 对 @import 和 url() 进行处理
• style-loader - 把 CSS 插入到 DOM 中

Plugins

• clean-webpack-plugin - 清除已构建的产物
• copy-webpack-plugin - 复制文件到生产目录
• html-webpack-plugin - 根据模板生成HTML
• mini-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兼容性配置
• 实验性功能

🎯 注意

webpack5 对一下内容的相关说明 持续整理中

• 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