webpack入門學習筆記11 —— 在項目中對打包編譯的文件進行分類

1. 寫在前面

在前面的博客中，咱們對Webpack項目進行了不少配置，也屢次打包編譯了項目。若是你細心觀察的話，你會看到，項打包編譯後的目代碼,所有都放在了 build 文件夾下，沒有根據文件格式的不一樣再次進行分類。

可是咱們所指望的場景是：項目打包編譯以後，對文件進行分類，不一樣的文件放在不一樣的文件夾下。好比打包編譯後，圖片所有都放在 build/images 文件夾下，樣式文件所有放在 build/css 文件夾下，這樣便於管理項目。以下圖所示：

那麼須要如何配置，才能達到這個目的呢？在這篇博客中，我會跟你們分享。

本片博客的主要內容有：

• 將圖片文件進行分類
• 將CSS樣式文件進行分類

2. 將圖片文件進行分類

想要對圖片進行分類，咱們須要使用 url-loader 來處理圖片文件。第一步仍是安裝該loader，安裝命令以下：

yarn add url-loader -D
複製代碼

安裝完成以後，到 webpack.config.js 中進行配置，配置規則很是簡單，這裏直接給出代碼：

module.exports = {
    /* 節省篇幅，其他配置已省略 */
    module: {
        rules: [ {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 2 * 1024,    // 小於2k的圖片，直接使用Base64編碼進行處理
                        outputPath: '/image/'
                    }
                }
            }
        ]
    }
}
複製代碼

這裏將其餘的配置規則省略了，若是你想看其餘的配置規則，能夠查看個人 GitHub倉庫 - webpack-learning ,或者經過本文末尾的連接，跳轉到我以前的博客中進行查看。

下面對上述配置進行簡單解釋：

• 使用url-loader處理圖片資源的時候，須要指定 limit 屬性，當圖片小於該屬性大小的時候，直接使用Base64編碼處理圖片，不會再項目中生成圖片文件。
• 當圖片大於該屬性大小的時候，不使用Base64編碼處理圖片，而是將該圖片放到 build 文件夾下，若是指定了 outputPath 屬性，那麼圖片會放到該屬性指定的目錄下。

3. 將CSS樣式文件進行分類

對打包編譯後的CSS文件進行分類，須要藉助一個插件，即：mini-css-extract-plugin 。使用以前須要使用如下命令進行安裝：

yarn add mini-css-extract-plugin -D
複製代碼

安裝完成以後，進行如下配置：

let MiniCssExtract = require('mini-css-extract-plugin')     // 引入插件
/* 節省篇幅，其他配置已省略 */
module.exports = {
    plugins: [
        new MiniCssExtract({
            filename: 'css/main.css'    // 配置CSS輸出位置
        }),
    ]
}
複製代碼

配置完成以後，進行打包編譯項目，就會看到編譯後的CSS文件在 build/css 文件夾之下了。

4. 寫在最後

以上即是本篇博客的全部內容，但願對一些初次接觸Webpack的前端小白有所幫助。

文章中若有錯誤以後，還但願各位大佬予以糾正。

上一篇: webpack入門學習筆記10 —— 在項目中使用圖片資源

下一篇: webpack入門學習筆記12 —— 打包編譯後文件的引入路徑問題