这是我参与「第五届青训营 」笔记创作活动的第13天
如何使用Webpack?
关于 Webpack的使用方法,基本都围绕“配置"展开,而这些配置大致可划分为两类:
- 流程类:作用于流程中某个or 若干个环节,直接影响打包效果的配置项
- 工具类:主流程之外,提供更多工程化能力的配置项
流程类配置
配置总览
按使用频率:
- entry/output
- module/plugins
- mode
- watch/devServer/devtoo
处理CSS
目录结构:
安装Loader
npm add -D css-loader style-loader
添加module处理css文件
参考资料
接入Babel
目录结构:
1.安装依赖
npm i -D babel/core @babel/preset-env babel-loader
2.生命产物出口output
3.执行npx webpack
参考资料
生成HTML
目录结构:
- 安装依赖
npm i -D html-webpack-plugin
- 生命产物出口
output - 执行
npx webpack
参考资料