rzdata/knowledge
20
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

技术文档/前端/webpack5通用配置.md updated from https://stackedit.cn/

Browse Source
This commit is contained in:
方崇德 2024-02-19 16:37:58 +08:00
parent bce57a8f8c
commit 72f1b34885
1 changed files with 43 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
技术文档/前端/webpack5通用配置.md
View File

@ -6,22 +6,48 @@ Node版本要在10.13.0以上
#### 1.2、基础依赖 #### 1.2、基础依赖
``` ```
-- 安装webpack所需依赖 `-- 安装webpack所需依赖
npm i webpack webpack-cli webpack-dev-server --save `
-- 安装自动生成html依赖 `npm i webpack webpack-cli webpack-dev-server --save
npm i html-webpack-plugin html-loader clean-webpack-plugin --save-dev `
-- 安装css/字体图表处理依赖
npm i css-loader style-loader sass sass-loader mini-css-extract-plugin --save `-- 安装自动生成html依赖
-- 如果有scss则还需引入 `
npm i sass sass-loader --save `npm i html-webpack-plugin html-loader clean-webpack-plugin --save-dev
-- 如果有less则还需引入 `
npm i less less-loader --save
-- 为不同内核的浏览器加上CSS前缀 `-- 安装css/字体图表处理依赖
npm install postcss-loader autoprefixer --save `
-- 图片及字体处理 `npm i css-loader style-loader sass sass-loader mini-css-extract-plugin --save
npm i url-loader file-loader --save `
-- 合并配置
npm i webpack-merge --save-dev `-- 如果有scss则还需引入
`
`npm i sass sass-loader --save
`
`-- 如果有less则还需引入
`
`npm i less less-loader --save
`
`-- 为不同内核的浏览器加上CSS前缀
`
`npm install postcss-loader autoprefixer --save
`
`-- 图片及字体处理
`
`npm i url-loader file-loader --save
`
`-- 合并配置
`
`npm i webpack-merge --save-dev`
``` ```
说明：这里只是一些基础依赖，如果有其他优化调整额外需要引入依赖的话，需要查看一下是否与webpack5是否兼容。 说明：这里只是一些基础依赖，如果有其他优化调整额外需要引入依赖的话，需要查看一下是否与webpack5是否兼容。
### 二、配置 ### 二、配置
@ -30,5 +56,5 @@ npm i webpack-merge --save-dev
<!--stackedit_data: <!--stackedit_data:
eyJoaXN0b3J5IjpbMTQwMjEyMDAwXX0= eyJoaXN0b3J5IjpbLTIxNDQ2ODQ3NDAsMTQwMjEyMDAwXX0=
--> -->