快捷導(dǎo)航

webpack5打包其他資源以及devServer的配置方式

更新時(shí)間：2026年01月01日 16:11:40 作者：Celester_best

文章介紹了Webpack5打包其他資源的方法,使用file-loader處理不需要處理的資源,并通過(guò)exclude排除已處理的資源類(lèi)型,同時(shí),文章詳細(xì)講解了Webpack的devServer功能,它可以幫助開(kāi)發(fā)者在修改代碼后自動(dòng)編譯、刷新瀏覽器,從而提高開(kāi)發(fā)效率

webpack5打包其他資源

其他資源：其他資源指一些不需要做任何處理（例如不需要壓縮，優(yōu)化等處理），只需要原封不動(dòng)的輸出，比如字體圖標(biāo)

打包其他資源可以用file-loader

其他資源應(yīng)該怎么識(shí)別呢？我們可以使用exclude排除html、css、js、less等資源（這個(gè)根據(jù)實(shí)際項(xiàng)目進(jìn)行排除），剩余的為其他資源。

            // 打包其他資源(除了html，js,css，less等資源以外的資源)
            {
                // 使用exclude排除html，js,css，less等資源
                exclude: /\.(css|html|js|less|png|jpg|gif)$/,
                loader: 'file-loader'
            }

devServer

通過(guò)前面的學(xué)習(xí)，我們可以發(fā)現(xiàn)每次修改代碼之后，我們都需要在執(zhí)行webpack命令重新編譯打包，很不方便。

devServer可以幫助我們解決這個(gè)問(wèn)題，只要編譯打包過(guò)之后，我們?cè)傩薷拇a，devserver就會(huì)自動(dòng)幫我們編譯打包，自動(dòng)刷新瀏覽器。

devServer需要webpack-dev-server庫(kù)，安裝webpack-dev-server

webpack4中devServer的配置

    // 開(kāi)發(fā)服務(wù)器 devServer：用來(lái)自動(dòng)化（自動(dòng)編譯，自動(dòng)打開(kāi)瀏覽器，自動(dòng)刷新瀏覽器）
    devServer: {
        // 項(xiàng)目構(gòu)建后的路徑，也就是代碼要運(yùn)行的項(xiàng)目目錄
        contentBase: resolve(__dirname, 'build'),
        //compress是否啟動(dòng)gzip壓縮，讓代碼體積更小，速度更快
        compress: true,
        // 制定開(kāi)發(fā)服務(wù)器的端口號(hào)
        port: 3000,
        // open是否自動(dòng)打開(kāi)瀏覽器，打開(kāi)的是默認(rèn)瀏覽器。
        open: true,
        hot: true
    }

webpack5中devServer的配置

    // 開(kāi)發(fā)服務(wù)器 devServer：用來(lái)自動(dòng)化（自動(dòng)編譯，自動(dòng)打開(kāi)瀏覽器，自動(dòng)刷新瀏覽器）
    devServer: {
        // 項(xiàng)目構(gòu)建后的路徑，也就是代碼要運(yùn)行的項(xiàng)目目錄
        static: resolve(__dirname, 'build'),
        //compress是否啟動(dòng)gzip壓縮，讓代碼體積更小，速度更快
        compress: true,
        // 指定開(kāi)發(fā)服務(wù)器的端口號(hào)
        port: 3000,
        // open是否自動(dòng)打開(kāi)瀏覽器，打開(kāi)的是默認(rèn)瀏覽器。
        open: true,
        hot: true
    }

執(zhí)行npx webpack-dev-server命令之后，會(huì)自動(dòng)打開(kāi)瀏覽器，如果修改了代碼之后，瀏覽器也會(huì)自動(dòng)刷新，不需要值重新打包編譯。