介紹

默認(rèn)情況下webpack打包后，我們的圖片和js等文件都會(huì)被打包到dist目錄下，文件多了混淆在一起一方面不利于文件的查找和管理，另外一方面看上去也不美觀。
所以今天我們學(xué)習(xí)的內(nèi)容就是控制輸出后的文件進(jìn)入不同的目錄。

一、配置

新增47-49行配置

const path = require("path");

module.exports = {
    // 入口
    entry: "./src/main.js",  // 需要用相對(duì)路徑
    // 輸出
    output: {
        // 文件的輸出路徑
        // __dirname nodejs的變量，代表當(dāng)前文件的文件夾目錄
        path: path.resolve(__dirname, "dist"),   // 需要用絕對(duì)路徑 需要用的Nodejs的核心模塊 path，專門處理路徑問題
        // 文件名
        filename: "main.js",
        // filename: "js/main.js",
    },
    // 加載器
    module: {
        rules: [
            // loader的配置
            {
                test: /\.css$/,     // 只檢測(cè).css文件
                use:[
                    // 執(zhí)行順序，從右到左，從下到上
                    "style-loader", // 將js中的css通過創(chuàng)建style標(biāo)簽添加到html文件中生效
                    "css-loader",    // 將css資源編譯成commonJs的模塊到j(luò)s中
                ] 
            },
            {
                test: /\.less$/,     // 只檢測(cè).less文件
                // loader: "xxx", // 配置中只能使用一個(gè)loader，use可以多個(gè)
                use:[
                    // 執(zhí)行順序，從右到左，從下到上
                    "style-loader", // 將js中的css通過創(chuàng)建style標(biāo)簽添加到html文件中生效
                    "css-loader",    // 將css資源編譯成commonJs的模塊到j(luò)s中
                    "less-loader",    // 將less資源編譯成css
                ]
            },
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                type: "asset",  // 這里使用asset相當(dāng)于就是webpack4中使用了url-loader來處理
                parser: {
                    dataUrlCondition: {
                        // 設(shè)置小于15k 使用base64
                        // 優(yōu)點(diǎn)減少請(qǐng)求數(shù)量 缺點(diǎn)：文件體積變大
                        maxSize: 15 * 1024, 
                    }
                },
              			// 輸出圖片名稱
                		// [hash:10]hash取值前10位 [ext]文件后綴名 [query]攜帶參數(shù) ?key=123&m=aaa
                    generator: {
                        filename: 'images/[hash][ext][query]'
                    }

            },
        ],
    },
    // 插件
    plugins: [
        // plugin的配置
    ],
    // 模式
    mode: "development",
};

官方手冊(cè)參考

二、資源輸出

npm webpack

三、效果展示

介紹

前面學(xué)習(xí)過程中，我們發(fā)現(xiàn)，我們每次打包都需要手動(dòng)刪除dist目錄里的文件，這樣操作起來比較麻煩。
今天我們學(xué)習(xí)的內(nèi)容就是來解決這個(gè)問題的，打包前先自動(dòng)刪除dist目錄（遞歸）然后再進(jìn)行新的文件打包生產(chǎn)。

三、配置

新增第12行

module.exports = {
    // 入口
    entry: "./src/main.js",  // 需要用相對(duì)路徑
    // 輸出
    output: {
        // 文件的輸出路徑
        // __dirname nodejs的變量，代表當(dāng)前文件的文件夾目錄
        path: path.resolve(__dirname, "dist"),   // 需要用絕對(duì)路徑 需要用的Nodejs的核心模塊 path，專門處理路徑問題
        // 文件名
        filename: "main.js",
        // filename: "js/main.js",
        clean: true,
    },
  ...
  ...
}

配置完畢后，大家可以將原本的dist目錄中的文件名改改，再試試打包效果。文章來源地址http://www.zghlxwxcb.cn/news/detail-836081.html

到了這里，關(guān)于【快速搞定Webpack5】修改輸出文件目錄及自動(dòng)清理上次打包文件（五）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！