現在我閱讀了打包 scss 檔案的配置，如下所示：
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
{
test : /\.(scss)$/ ,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
modules: true,
sourceMap: true
}
},
"sass-loader"
]
}
為什么 scss 檔案需要 3 種型別的加載器？決議程序是什么？首先使用MiniCssExtractPlugin.loadercss-loader，最后使用sass-loader？為什么不使用唯一的一個 sass-loader 來決議 scss 檔案？
uj5u.com熱心網友回復：
每個裝載機只做一項簡單的作業：
- 將
sass-loaderSass 編譯為純 CSS 字串。但無法將其保存到 CSS 檔案中。 - “
css-loader捕獲”編譯后的 CSS 字串并匯出為 JS 模塊以在其他加載器中處理它。加載程式無法保存 CSS 檔案。 - 這
MiniCssExtractPlugin.loader是一個自己插件的中間件。它不會將其他人作為“捕獲” JS 模塊css-loader并將其傳遞給 pluginMiniCssExtractPlugin。 - 該插件
MiniCssExtractPlugin提取純 CSS 字串并將其保存為 CSS 檔案。
注意：Webpack 為 webpack 條目中定義的每個資源生成一個 js 檔案。提取css，但不消除生成的空js檔案
。 要洗掉意外的空 js 檔案，請使用插件webpack-remove-empty-scripts。mini-css-extract-plugin
從scss中提取 css的最小webpack.config.js。
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
module.exports = {
entry: {
'styles': './assets/scss/styles.scss',
},
module: {
rules: [
{
test: /\.(scss)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
modules: true,
sourceMap: true
}
},
'sass-loader',
]
},
]
},
plugins: [
new RemoveEmptyScriptsPlugin(), // <== remove empty js files
new MiniCssExtractPlugin({
filename: '[name].[chunkhash:8].css', // <== save CSS file
}),
],
};
``
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/420526.html
標籤：