webpack打包的時(shí)候只認(rèn)識.js文件杨名，但我們開發(fā)中肯定不僅僅只是js文件锦针，如.html荠察、.css置蜀、.jpg等，webpack提供了很多loader來打包不同類型的文件悉盆。
1. css-loader
對于加載css文件來說盯荤，我們需要一個(gè)可以讀取css文件的loader，這個(gè)loader最常用的是css-loader焕盟。
1.1 安裝
yarn add css-loader -D
1.2 使用
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/, // 以.css文件結(jié)尾
// 第一種寫法
use: [
{
loader: 'css-loader',
}
],
// 第二種寫法
loader: 'css-loader',
//第三種寫法
use: ['css-loader']
// 第二種和第三種寫法最終都會被轉(zhuǎn)成第一種寫法
}
]
}
}
2. style-loader
css-loader只是負(fù)責(zé)將.css文件進(jìn)行解析秋秤，并不會將解析之后的css插入到頁面中，如果我們希望再完成插入style的操作脚翘，那么我們還需要另外一個(gè)loader灼卢，就是style-loader。
2.1安裝
yarn add style-loader -D
2.2 使用
module.exports = {
module: {
rules: [
{
test: /\.css$/, // 以.css文件結(jié)尾
use: ['style-loader','css-loader']
}
]
}
}
*注意：因?yàn)閘oader的執(zhí)行順序是從右向左（或者說從下到上来农，或者說從后到前的）鞋真，所以我們需要將styleloader寫到css-loader的前面。
其實(shí)style-loader做的事情很簡單沃于，就是在動態(tài)創(chuàng)建了一個(gè)style標(biāo)簽涩咖，把css-loader處理的css內(nèi)容放到style標(biāo)簽內(nèi)，然后在插入到頁面的head標(biāo)簽內(nèi)繁莹。
3. less文件處理
3.1 使用less工具來完成文件的編譯轉(zhuǎn)換
安裝less工具將less文件轉(zhuǎn)為css文件檩互。
yarn add less -D
3.2 less-loader處理
使用less-loader，來自動使用less工具轉(zhuǎn)換less到css
安裝
yarn add less-loader -D
使用
const path = require('path')
module.exports = {
module: {
rules: [
{
test: /\.less$/,
use: ['style-loader','css-loader', 'less-loader']
}
]
}
}
4. 瀏覽器兼容性
在這里可以查詢?yōu)g覽器的占有率咨演。
4.1 認(rèn)識browserslist工具
Browserslist是一個(gè)在不同的前端工具之間闸昨，共享目標(biāo)瀏覽器和Node.js版本的配置
- Autoprefixer
- Babel
- postcss-preset-env
- eslint-plugin-compat
- stylelint-no-unsupported-browser-features
- postcss-normalize
- obsolete-webpack-plugin
4.1.1 命令行使用browserslist
npx browserslist ">1%, last 2 version, not dead"
4.1.2 配置browserslist
方案一：在package.json中配置：
{
"browserslist": [
"last 2 version",
"not dead",
"> 0.2%"
]
}
方案二：在根目錄新建.browserslistrc文件
last 2 version
not dead
> 0.2%
方案一和方案二配置的條件都是or關(guān)系， 如果要同時(shí)滿足條件用and
5 PostCSS工具
PostCSS是一個(gè)通過JavaScript來轉(zhuǎn)換樣式的工具薄风，這個(gè)工具可以幫助我們進(jìn)行一些CSS的轉(zhuǎn)換和適配饵较，比如自動添加瀏覽器前綴、css樣式的重置遭赂，但是實(shí)現(xiàn)這些工具告抄，我們需要借助于PostCSS對應(yīng)的插件。
5.1 命令行使用postcss
yarn add postcss postcss-cli -D
可以在這里查詢到css樣式添加規(guī)則嵌牺。
因?yàn)槲覀冃枰砑忧熬Y，所以要安裝autoprefixer：
yarn add autoprefixer -D
命令行直接使用使用postcss工具龄糊，并且制定使用autoprefixer：
npx postcss --use autoprefixer -o result.css ./src/css/style.css
5.2 postcss-loader
在webpack中使用postcss就是使用postcss-loader來處理的逆粹。
安裝
yarn add postcss-loader -D
配置
第一種方案：
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/, // 以.css文件結(jié)尾
use: ['style-loader','css-loader', {
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
require('autoprefixer')
]
}
}
}]
}
]
}
}
第二種：
也可以將plugin封裝出來，在根目錄新建postcss.config.js文件：
module.exports = {
plugins: [
require('autoprefixer')
]
}
webpack.config.js
const path = require('path')
module.exports = {
module: {
rules: [
{
test: /\.css$/, // 以.css文件結(jié)尾
use: ['style-loader','css-loader', 'postcss-loader']
},
{
test: /\.less$/,
use: ['style-loader','css-loader', 'postcss-loader', 'less-loader']
}
]
}
}
5.3 postcss-preset-env
事實(shí)上炫惩，在配置postcss-loader時(shí)僻弹，我們配置插件并不需要使用autoprefixe，我們可以使用另外一個(gè)插件：postcss-preset-env他嚷。
postcss-preset-env也是一個(gè)postcss的插件蹋绽，它可以幫助我們將一些現(xiàn)代的CSS特性芭毙，轉(zhuǎn)成大多數(shù)瀏覽器認(rèn)識的CSS，并且會根據(jù)目標(biāo)瀏覽器或者運(yùn)行時(shí)環(huán)境添加所需的polyfill卸耘，也包括會自動幫助我們添加autoprefixer（所以相當(dāng)于已經(jīng)內(nèi)置了autoprefixer）退敦。
安裝：
yarn add postcss-preset-env -D
使用
將autoprefixer替換成postcss-preset-env就行了：
module.exports = {
plugins: [
require('postcss-preset-env')
]
}
有些插件直接寫字符串就行，會自動requre：
module.exports = {
plugins: [
'postcss-preset-env'
]
}
5.4 css @import問題
問題復(fù)現(xiàn)：
假如main.js里面引入了src/index.css蚣抗，而src/index.css里使用@import引入了src/test.css侈百，就會出現(xiàn)src/test.css文件里的樣式不會被postcss所處理，這時(shí)候就需要配置：
webpack.config.js
const path = require('path')
module.exports = {
module: {
rules: [
{
test: /\.css$/, // 以.css文件結(jié)尾
use: ['style-loader', {
loader: 'css-loader',
options: {
importLoaders: 1 //后面有幾個(gè)插件就填寫幾
}
}, 'postcss-loader']
},
{
test: /\.less$/,
use: ['style-loader', {
loader: 'css-loader',
options: {
importLoaders: 2 //后面有幾個(gè)插件就填寫幾
}
}, 'postcss-loader', 'less-loader']
}
]
}
}
6 其他資源處理
要處理jpg翰铡、png等格式的圖片钝域，我們也需要有對應(yīng)的loader：file-loader
6.1 file-loader
安裝
yarn add file-loader -D
配置
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)/,
use: 'file-loader'
}
]
}
}
圖片資源加載方式：
require('xxx').defaultimport imgSource from 'xxx.png'
有時(shí)候我們處理后的文件名稱按照一定的規(guī)則進(jìn)行顯示，比如保留原來的文件名锭魔、擴(kuò)展名例证，同時(shí)為了防止重復(fù)，包含一個(gè)hash值等迷捧。這個(gè)時(shí)候我們可以使用PlaceHolders來完成织咧，webpack給我們提供了大量的PlaceHolders來顯示不同的內(nèi)容。
介紹幾個(gè)最常用的placeholder：
- [ext]： 處理文件的擴(kuò)展名
- [name]：處理文件的名稱党涕；
- [hash]：文件的內(nèi)容烦感，使用MD4的散列函數(shù)處理，生成的一個(gè)128位的hash值（32個(gè)十六進(jìn)制）膛堤；
- [contentHash]：在file-loader中和[hash]結(jié)果是一致的（在webpack的一些其他地方不一樣手趣，后面會講到）；
- [hash:<length>]：截圖hash的長度肥荔，默認(rèn)32個(gè)字符太長了绿渣；
- [path]：文件相對于webpack配置文件的路徑；
自定義圖片打包名字和輸出路徑：
webpack.config.js
const path = require('path')
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)/,
use: {
loader: 'file-loader',
options: {
name: '[name]-[hash:6].[ext]',
outputPath: 'images'
}
}
}
]
}
}
6.2 url-loader
url-loader和file-loader的工作方式是相似的燕耿，但是可以將較小的文件中符，轉(zhuǎn)成base64的URI。
安裝
yarn add url-loader -D
配置
和file-loader用法很相似
const path = require('path')
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)/,
use: {
loader: 'url-loader',
options: {
name: '[name]-[hash:6].[ext]',
outputPath: 'images',
limit: 100 * 1024 // byte, 只有小于100kb的才會轉(zhuǎn)成base64
}
}
}
]
}
}
7 用資源模塊類型（asset module type）
在webpack5之前誉帅，加載這些資源我們需要使用一些loader淀散，比如raw-loader 、url-loader蚜锨、file-loader档插，在webpack5之后，我們可以直接使用資源模塊類型（asset module type）亚再，來替代上面的這些loader郭膛。
注意： asset module type打包的圖片資源如果用require不需要.detault
7.1 asset/resource
asset/resource 發(fā)送一個(gè)單獨(dú)的文件并導(dǎo)出 URL。之前通過使用 file-loader 實(shí)現(xiàn)氛悬。
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)/,
type: 'asset/resource'
}
]
}
}
自定義輸出文件和文件名
webpack5的[ext]已經(jīng)包含了.
第一種寫法：
這種寫法包含所有的assetModule的定義则剃，不推薦耘柱。
webpack.config.js
module.exports = {
output: {
assetModuleFilename: 'img/[name]-[hash:6][ext]'
}
}
第二種寫法：
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)/,
type: 'asset/resource',
generator: {
filename: 'images/[name]-[hash:6][ext]'
}
}
]
}
}
7.2 asset/inline
asset/inline 導(dǎo)出一個(gè)資源的 data URI。之前通過使用 url-loader 實(shí)現(xiàn)棍现。
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)/,
type: 'asset/inline',
}
]
}
}
7.3 asset
asset可以實(shí)現(xiàn)url-loader的limit效果调煎。
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)/,
type: 'asset',
generator: {
filename: 'images/[name]-[hash:6][ext]'
},
parser: {
dataUrlCondition: {
maxSize: 20 * 1024 //byte
}
}
}
]
}
}
8 加載字體文件
我們可以選擇使用file-loader來處理，也可以選擇直接使用webpack5的資源模塊類型來處理轴咱。
module.exports = {
module: {
rules: [
{
test: /\.(woff2?|eot|ttf)$/,
type: 'asset/resource',
generator: {
filename: 'font/[name]-[hash:6][ext]'
},
}
]
}
}
