在阅读这篇文章之前,请确认你已经了解了webpack的基本常识
还不了解?点击查看《webpack基础》
安装依赖
多人协作时,可以在项目根目录下新建一个.npmrc
文件用来指定npm源
1 2 3
| # 统一团队的npm源 registry=https://registry.npm.taobao.org # 使用npm install的时候就会默认淘宝源
|
项目搭建
样式 静态资源 (图片第三方字体) es6+ (vue react ts)
样式:借助css-loader处理css语法,借助style-loader使用css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| module: { rules: [ { test: /\.css$/, use: ["style-loader", "css-loader"], }, { test:/\.less$/, use: ["style-loader", "css-loader","less-loader"] }, { test:/\.scss$/, use: ["style-loader", "css-loader","sass-loader"] }, ], },
|
postcss官网
1 2 3 4 5 6 7
| 根目录下新增`postcss.config.js` module.exports = { plugins:[ require("autoprefixer"), require("cssnano") ] }
|
package.json
中"browserslist":["last 2 versions","> 1%"]
用于配置autoprefixer
自动兼容版本(兼容所有浏览器最近的两个大版本,全球市场占有率大于1%的浏览器)
更多点击 –> Browserslist
安装mini-css-extract-plugin
用来做样式提取,将css样式抽离成css文件
1
| npm install mini-css-extract-plugin -D
|
修改webpack.config.js
中的配置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
| const minicssExtractPlugin = require('mini-css-extract-plugin')
module.exports = { ... module: { rules: [ ... { test:/\.less$/, use: [minicssExtractPlugin.loader, "css-loader", "postcss-loader","less-loader"] }, ... ], }, plugins: [ ... new minicssExtractPlugin({ filename:"[name].css", }), ... ], ... }
|
图片/字体⽂件处理:
url-loader
和file-loader
都可以⽤来处理本地的资源⽂件,如图⽚、字体、⾳视频等。功能也是类似的,不过url-loader
可以指定在⽂件⼤⼩⼩于指定的限制时,返回DataURL
,不会输出真实的⽂件,可以减少昂贵的⽹络请求。
1 2
| #安装 npm install url-loader file-loader -D
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
| import pic from 'you pic url'
const img = new Image() img.src = pic
const root = document.getElementById('app') root.append(img)
{ test:/\.(png|jp?g|gif|webp)$/, use:{ loader:'file-loader', options:{ name:"images/[name].[ext]", outputPath:'images', publicPath:'../images' } }
use:{ loader:'url-loader', options:{ name:"images/[name].[ext]", outputPath:'images', publicPath:'../images', limit: 1024*10 } } }
|
file-loader更多相关
如果需要使⽤图⽚压缩功能,可以使⽤image-webpack-loader
。
字体
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| //css @font-face { font-family: "webfont"; font-display: swap; src: url("webfont.woff2") format("woff2"); }
body { background: blue; font-family: "webfont"!important; }
//webpack.config.js { test: /\.(eot|ttf|woff|woff2|svg)$/, use: "file-loader" }
|
hash
hash
策略
在输出的文件名后添加[hash]
,可以用[hash:8]
控制文件名中hash长度
以项目为单位,项目内容改变,则会生产新的hash,内容不变hash不变
使用chunkhash
以chunk
为单位,当一个文件内容改变,则整个chunk组的模块hash都会改变
[name]-[chunkhash:8].[ext]
contenthash
以自身内容为单位