1. 寫(xiě)在前面
在前面的博客中淮韭，我們對(duì)Webpack項(xiàng)目進(jìn)行了很多配置窗慎，也多次打包編譯了項(xiàng)目铺坞。如果你細(xì)心觀察的話渤早，你會(huì)看到职车，項(xiàng)打包編譯后的目代碼,全部都放在了 build 文件夾下，沒(méi)有根據(jù)文件格式的不同再次進(jìn)行分類(lèi)鹊杖。
但是我們所期望的場(chǎng)景是：項(xiàng)目打包編譯之后悴灵，對(duì)文件進(jìn)行分類(lèi)，不同的文件放在不同的文件夾下骂蓖。比如打包編譯后积瞒，圖片全部都放在 build/images 文件夾下，樣式文件全部放在 build/css 文件夾下登下，這樣便于管理項(xiàng)目茫孔。如下圖所示：
那么需要如何配置，才能達(dá)到這個(gè)目的呢被芳？在這篇博客中缰贝，我會(huì)跟大家分享。
本片博客的主要內(nèi)容有：
- 將圖片文件進(jìn)行分類(lèi)
- 將CSS樣式文件進(jìn)行分類(lèi)
2. 將圖片文件進(jìn)行分類(lèi)
想要對(duì)圖片進(jìn)行分類(lèi)畔濒，我們需要使用 url-loader 來(lái)處理圖片文件剩晴。第一步還是安裝該loader，安裝命令如下：
yarn add url-loader -D
安裝完成之后侵状，到 webpack.config.js 中進(jìn)行配置李破，配置規(guī)則非常簡(jiǎn)單宠哄，這里直接給出代碼：
module.exports = {
/* 節(jié)省篇幅，其余配置已省略 */
module: {
rules: [ {
test: /\.(png|jpg|jpeg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 2 * 1024, // 小于2k的圖片嗤攻，直接使用Base64編碼進(jìn)行處理
outputPath: '/image/'
}
}
}
]
}
}
這里將其他的配置規(guī)則省略了毛嫉，如果你想看其他的配置規(guī)則，可以查看我的 GitHub倉(cāng)庫(kù) - webpack-learning ,或者通過(guò)本文末尾的鏈接妇菱，跳轉(zhuǎn)到我之前的博客中進(jìn)行查看承粤。
下面對(duì)上述配置進(jìn)行簡(jiǎn)單解釋?zhuān)?/p>
- 使用url-loader處理圖片資源的時(shí)候，需要指定 limit 屬性闯团，當(dāng)圖片小于該屬性大小的時(shí)候辛臊，直接使用Base64編碼處理圖片，不會(huì)再項(xiàng)目中生成圖片文件房交。
- 當(dāng)圖片大于該屬性大小的時(shí)候彻舰，不使用Base64編碼處理圖片，而是將該圖片放到 build 文件夾下候味，如果指定了 outputPath 屬性刃唤，那么圖片會(huì)放到該屬性指定的目錄下。
3. 將CSS樣式文件進(jìn)行分類(lèi)
對(duì)打包編譯后的CSS文件進(jìn)行分類(lèi)白群，需要借助一個(gè)插件尚胞，即：mini-css-extract-plugin 。使用之前需要使用以下命令進(jìn)行安裝：
yarn add mini-css-extract-plugin -D
安裝完成之后帜慢，進(jìn)行以下配置：
let MiniCssExtract = require('mini-css-extract-plugin') // 引入插件
/* 節(jié)省篇幅笼裳，其余配置已省略 */
module.exports = {
plugins: [
new MiniCssExtract({
filename: 'css/main.css' // 配置CSS輸出位置
}),
]
}
配置完成之后，進(jìn)行打包編譯項(xiàng)目粱玲，就會(huì)看到編譯后的CSS文件在 build/css 文件夾之下了躬柬。
4. 寫(xiě)在最后
以上便是本篇博客的所有內(nèi)容，希望對(duì)一些初次接觸Webpack的前端小白有所幫助抽减。
文章中如有錯(cuò)誤之后楔脯，還希望各位大佬予以糾正。
