我有许多Webpack入口点(14),这些入口点使用splitChunks
,minChunks: 2
进行捆绑和代码分割。它们都依赖于某些全局CSS。我希望将全局css包含在捆绑包中,但是在2个地方为css文件添加导入语句以触发splitChunks
感觉很困难。
有没有办法告诉webpack或mini-css-extract将CSS文件直接包含在代码拆分包中?不必import css
位于两个文件的顶部?理想状态将类似于include: [file1.css, file2.css]
,数组中的文件将被添加到shared.css
代码拆分包中。虽然可能会是一个更hacky的解决方案:(
module: {
rules: [
{
test: /\.jsx?$/,
exclude: [/node_modules/, /readme/, /scss/],
loaders: 'happypack/loader'
},
{
test: /\.(scss|css)$/,
exclude: [/tools/, /utils/],
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-resources-loader',
options: {
resources: ['./scss/partials/_colors.scss']
}
}
]
},
]
},
optimization: {
removeAvailableModules: false,
removeEmptyChunks: false,
splitChunks: {
cacheGroups: {
commons: {
chunks: 'all',
minChunks: 2,
name: 'shared'
}
}
}
},
plugins: [
new HappyPack({
loaders: ['cache-loader', 'babel-loader?cacheDirectory=true&sourceMaps=true', 'eslint-loader'],
threads: 4
}),
new MiniCssExtractPlugin({
filename: './[name].css?[hash]'
}),