Handandbrainofking / webpack-5-practice

webpack5 babel sass eslint svg img css

📦 Webpack 5 Practice

利用 webpack 5、babel、sass、postcss、webapck-chain 等模块、库实现生产项目构建的实战

💻 使用

• 安装 yarn
• 调试 yarn dev
• 构建 yarn build
• 正式环境调试 yarn start

🛠 功能

• Webpack 5
• Babel 7
• Sass
• PostCSS 8

🤝 依赖

webpack

• webpack
• webpack-cli - webpack 命令行
• webpack-dev-server - webpack 开发服务
• ebpack-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兼容性配置
• 实验性功能
• 缓存 - 使用缓存需要把相对路径加全如 :./webpack/config.js

🎯 注意

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