webpack5的loader配置小白學習篇

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

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

loader 用于各類資源的處理

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

這里我列6個：

babel-loader

ts-loader

css-loader

sass-loader

style-loader

MiniCssExtractPlugin.loader

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

js和css相關的loader

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

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

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

MiniCssExtractPlugin.loader其實也是個plugin,它可以把樣式文件拎出來。變成一個css文件。既代碼分割，樣式分割。

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

這個chunk之前解釋過這里再加強一下。chunkFileName就是異步引入的css文件。例如：按需加載的css。則就會走chunkFileName配置的名稱。

以上就是webpack5的loader配置小白學習篇的詳細內容，后續(xù)再講plugin屬性，此屬性是最強，更多關于webpack5 loader配置的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: