描述
我在webpack中使用了mini-css-extract-plugin:
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[hash].css',
chunkFilename: '[name].[hash].css',
})
]
为了在块文件中加载scss文件:
{
test: /\.scss$/,
use: [
{ loader: MiniCssExtractPlugin.loader, options: {
hmr: isdev,
reloadAll: true
}
},
"css-loader",
"sass-loader",
]
}
当我使用动态导入加载scss文件时:
import(/* webpackChunkName: "test" */ 'test.scss')
它将生成一个包含样式的test.[hash].css和一个test.[hash].js文件:
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[15],{
/***/ 81:
/***/ (function(module, exports, __webpack_require__) {
// extracted by mini-css-extract-plugin
/***/ })
}]);
问题
我希望最小化延迟和加载文件,所以我觉得几乎空白的test.[哈希值].js文件没有必要。
你有办法要么将scss包含在js文件中(参见Idea 1),要么不发出/使用几乎空白的js文件吗?
Idea 1:不使用mini-css-extract-plugin
我的第一个想法是不为动态导入的scss使用mini-css-extract-plugin,但这会将很多css基础内容包含在js中 (https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/255)。