webpack5 配置
1.初始化项目 配置流程
- 初始化webpack npm init -y 生成 初始化的package.json文件
- name不能是webpack，不然会和安装依赖起冲突
- main指的是打包的起始文件的入口地址
- 其他的默认就可以了
2.安装webpack 依赖 npm i webpack webpack-cli -D 安装 webpack，和webpack-cli两个依赖
3.打包dist文件 npx webpack ./src/main.js --mode=development
npx webpack ./src/main.js --mode=production
2.构建配置文件 webpack.config.js
-
配置项构成
-
1.入口 entry:‘’
-
2.输出 output:{}
-
3.加载器 module:[]
-
4.插件:plugins:[]
-
5.模式:mode
注意：此时的打包命令 变成了 npx webpack （因为已经配置了数据项了）
3.处理样式资源
1.处理css资源
- 下载包 命令行 npm i css-loader style-loader -D (用几个loader就下载几个)
2.处理less资源
- 下载包 npm install less less-loader --save-dev
注意 use 可以加载多个loader loader 只能加载一个
3.处理sass资源
- 下载包 npm install sass-loader sass webpack --save-dev
4 处理图片资源
-
处理图片资源时，webpack5自带将图片打包成图片目录的功能，所以直接写配置项
优化方式 ，设定转base64的图片的大小，这样可以优化请求数量，缺点是打包体积会变大
5.修改输出目录以及清空上次打包记录
- 目的：方便管理代码，进行目录结构分块，js和css区分开
6.处理字体图标资源以及其他静态文件
7.处理js资源
1.Eslint
- 新建文件 .eslintrc.* 文件名不能错
2.Babel 处理js版本兼容
- npm install -D babel-loader @babel/core @babel/preset-env
8.处理html资源 （自动引入js）
npm install --save-dev html-webpack-plugin
9.搭建开发服务器–自动打包看到数据
- 1.npm i webpack-dev-server -D
该配置后，启动命令就变成了 npx webpack serve 开发环境 在内存中生成 不会生成dist文件
10.搭建生产模式
编译的过程中 config 会被默认为目录下的一个 和 以前的原理一致
-
因为这个指令比较繁琐
-
运行环境的指令是 npx webpack serve --config ./config/webpack.dev.js
-
打包环境的指令是 npx webpack serve --config ./config/webpack.prod.js
-
导致太繁琐
- 故设定指定指令在package.json下设定 npm start /npm run dev/npm run build
-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DxsyJbG7-1661247051759)(C:\Users\11433\AppData\Roaming\Typora\typora-user-images\1661245154113.png)]
11.抽取css样式（避免白屏现象–处理数据）
-
npm install --save-dev mini-css-extract-plugin
-
引入const MiniCssExtractPlugin = require(“mini-css-extract-plugin”); // 抽取css样式的插件
-
因为采用的MiniCssExtractPlugin插件抽取样式 故将所有的style-loader 修改成MiniCssExtractPlugin.loader
-
否则样式抽取不成功
-
配置
样式的Css兼容性处理
-
1.npm i postcss-loader postcss postcss-preset-env -D
-
1247051760)]
样式的Css兼容性处理
- 1.npm i postcss-loader postcss postcss-preset-env -D
- [外链图片转存中…(img-iLBifARO-1661247051761)]
-