快捷導(dǎo)航

webpack5的loader配置小白學(xué)習(xí)篇

更新時(shí)間：2023年05月26日 11:28:36 作者：smallStone

這篇文章主要為大家介紹了webpack5的loader配置非常適合webpack入門的小白學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

loader 用于各類資源的處理

loader用于處理其他類型資源；什么是其他類型？就是各個(gè)類型都行，例如：css,scss,sass,stylus,ts,png,jpg,jpeg,font,svg...你能想到的所有資源都可以通過(guò)此屬性來(lái)處理，包括路徑處理，文件處理，不支持的語(yǔ)言解析都可以通過(guò)這個(gè)處理。

這里我列6個(gè)：

babel-loader

ts-loader

css-loader

sass-loader

style-loader

MiniCssExtractPlugin.loader

以上這些都是關(guān)于js和css處理的loader。關(guān)于圖片、字體等其他靜態(tài)資源文件，我再以后的文章中會(huì)給大家介紹到。

js和css相關(guān)的loader

// webpack.config.js
...
module: {
    rules: [
        {
            test: /\.css$/, // 用于匹配文件,可以是字符串或者正則
            loader: 'css-loader', // 當(dāng)只有一個(gè)的時(shí)候就用這個(gè)
            use: ['style-loader','css-loader',] // 當(dāng)有多個(gè)的時(shí)候就用這個(gè)，執(zhí)行順序是從右向左
        },
        {
            test: /\.scss$/, // 用于匹配文件,可以是字符串或者正則
            loader: 'css-loader', // 當(dāng)只有一個(gè)的時(shí)候就用這個(gè)
            use: [MiniCssExtractPlugin.loader, 'style-loader','css-loader', 'sass-loader'] // 執(zhí)行順序是從右向左
        },
        {
            test: /\.styl$/, // 用于匹配文件,可以是字符串或者正則
            loader: 'stylus-loader', // 當(dāng)只有一個(gè)的時(shí)候就用這個(gè)
            use: [{
                loader: 'postcss-loader', // 如果loader帶有參數(shù)，則使用此方式
                option: {
                    name: 'stylus'
                },
            },'css-loader', 'stylus-loader'] // 執(zhí)行順序是從右向左
        }
    ]
}
...

需要注意的是：此前我就已經(jīng)說(shuō)過(guò)css-loader是只吧css文件打包成模塊。并未引用到html文件。因此需要引入到html文件，則需要在css-loader處理后在執(zhí)行style-loader把處理后的css插入到html頁(yè)面內(nèi)使用（既生成一個(gè)style標(biāo)簽插入）。

sass-loader的使用前需要安裝sass/node-sass

MiniCssExtractPlugin.loader其實(shí)也是個(gè)plugin,它可以把樣式文件拎出來(lái)。變成一個(gè)css文件。既代碼分割，樣式分割。

// webpack.config.js
...
module: {},
plugins: [
    new MiniCssExtractPlugin({
        filename: '[name].min.css', // css名稱
        chunkFileName: '[name].chunk_[id].css' // 異步引入的css名稱
    })
]
...

這個(gè)chunk之前解釋過(guò)這里再加強(qiáng)一下。chunkFileName就是異步引入的css文件。例如：按需加載的css。則就會(huì)走chunkFileName配置的名稱。

以上就是webpack5的loader配置小白學(xué)習(xí)篇的詳細(xì)內(nèi)容，后續(xù)再講plugin屬性，此屬性是最強(qiáng)，更多關(guān)于webpack5 loader配置的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: