「Webpack知识体系学习二」 | 青训营笔记

77 阅读1分钟

这是我参与「第五届青训营 」笔记创作活动的第13天

如何使用Webpack?

关于 Webpack的使用方法,基本都围绕“配置"展开,而这些配置大致可划分为两类:

  • 流程类:作用于流程中某个or 若干个环节,直接影响打包效果的配置项
  • 工具类:主流程之外,提供更多工程化能力的配置项
image.png

流程类配置

image.png

配置总览

按使用频率:

  • entry/output
  • module/plugins
  • mode
  • watch/devServer/devtoo

Webpack配置官方文档 image.png

处理CSS

目录结构: image.png

安装Loader

npm add -D css-loader style-loader

添加module处理css文件 image.png

参考资料

接入Babel

目录结构: image.png

1.安装依赖

npm i -D babel/core @babel/preset-env babel-loader

2.生命产物出口output

3.执行npx webpack image.png

参考资料

生成HTML

目录结构: image.png

  1. 安装依赖

npm i -D html-webpack-plugin

  1. 生命产物出口output
  2. 执行npx webpack image.png

参考资料