Webpack代码拆分,将标记全局文件添加到代码拆分中而无需导入

时间:2018-12-24 20:11:15

标签: webpack code-splitting

我有许多Webpack入口点(14),这些入口点使用splitChunksminChunks: 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]'
    }),

0 个答案:

没有答案