1. 寫在前面
在前面的博客中，我們對Webpack項目進行了很多配置，也多次打包編譯了項目。如果你細心觀察的話，你會看到，項打包編譯后的目代碼,全部都放在了 build 文件夾下，沒有根據(jù)文件格式的不同再次進行分類。
但是我們所期望的場景是：項目打包編譯之后，對文件進行分類，不同的文件放在不同的文件夾下。比如打包編譯后，圖片全部都放在 build/images 文件夾下，樣式文件全部放在 build/css 文件夾下，這樣便于管理項目。如下圖所示：
那么需要如何配置，才能達到這個目的呢？在這篇博客中，我會跟大家分享。
本片博客的主要內(nèi)容有：
- 將圖片文件進行分類
- 將CSS樣式文件進行分類
2. 將圖片文件進行分類
想要對圖片進行分類，我們需要使用 url-loader 來處理圖片文件。第一步還是安裝該loader，安裝命令如下：
yarn add url-loader -D
安裝完成之后，到 webpack.config.js 中進行配置，配置規(guī)則非常簡單，這里直接給出代碼：
module.exports = {
/* 節(jié)省篇幅，其余配置已省略 */
module: {
rules: [ {
test: /\.(png|jpg|jpeg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 2 * 1024, // 小于2k的圖片，直接使用Base64編碼進行處理
outputPath: '/image/'
}
}
}
]
}
}
這里將其他的配置規(guī)則省略了，如果你想看其他的配置規(guī)則，可以查看我的 GitHub倉庫 - webpack-learning ,或者通過本文末尾的鏈接，跳轉(zhuǎn)到我之前的博客中進行查看。
下面對上述配置進行簡單解釋：
- 使用url-loader處理圖片資源的時候，需要指定 limit 屬性，當(dāng)圖片小于該屬性大小的時候，直接使用Base64編碼處理圖片，不會再項目中生成圖片文件。
- 當(dāng)圖片大于該屬性大小的時候，不使用Base64編碼處理圖片，而是將該圖片放到 build 文件夾下，如果指定了 outputPath 屬性，那么圖片會放到該屬性指定的目錄下。
3. 將CSS樣式文件進行分類
對打包編譯后的CSS文件進行分類，需要借助一個插件，即：mini-css-extract-plugin 。使用之前需要使用以下命令進行安裝：
yarn add mini-css-extract-plugin -D
安裝完成之后，進行以下配置：
let MiniCssExtract = require('mini-css-extract-plugin') // 引入插件
/* 節(jié)省篇幅，其余配置已省略 */
module.exports = {
plugins: [
new MiniCssExtract({
filename: 'css/main.css' // 配置CSS輸出位置
}),
]
}
配置完成之后，進行打包編譯項目，就會看到編譯后的CSS文件在 build/css 文件夾之下了。
4. 寫在最后
以上便是本篇博客的所有內(nèi)容，希望對一些初次接觸Webpack的前端小白有所幫助。
文章中如有錯誤之后，還希望各位大佬予以糾正。
