knowledge/技术文档/前端/webpack5通用配置.md

60 lines
1.1 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

### 一、环境及依赖配置
#### 1.1、环境要求
Node版本要在10.13.0以上
#### 1.2、基础依赖
```
`-- 安装webpack所需依赖
`
`npm i webpack webpack-cli webpack-dev-server --save
`
`-- 安装自动生成html依赖
`
`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
`
`-- 如果有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是否兼容。
### 二、配置
#### 2.1、通用配置webpack.base.js
<!--stackedit_data:
eyJoaXN0b3J5IjpbLTIxNDQ2ODQ3NDAsMTQwMjEyMDAwXX0=
-->