DWQA QuestionsCategory: ProgramThe CSS merged with extracttextplugin in webpack is not complete. Why are some CSS codes not merged?
SolidZORO asked 4 weeks ago

In fact, the requirement is very simple, that is to put all therequire('./*.css')The CSS of is merged intobundle_style.css
But it’s a combination of Web packsbundle_style.cssIncomplete. It should have merged a / B / c.css, but only c.css was included in the end.
I don’t know where there is a problem. In order to solve this problem, I opened a minimum test unit https://github.com/solidzoro/… For guidance.
Code display

// a.js

require('./a.css');

console.log('a.js');
// a.css

.a {
    width: 1px;
}

Similar questions

  • Web pack configures multi entry, how to merge CSS under multi entry
  • Extract Text Plugin: require.ensure() causes incomplete file (Webpack 2) #2450
2 Answers
array_huang answered 4 weeks ago

that is becauseExtractTextPluginThe CSS is packaged according to the packaged chunk (JS layer). I see that there are three entries defined in your webpack configuration, so there will be three chunks in the final package and three CSS files in theory.
But because you gaveExtractTextPluginThe parameter passed in is a fixed CSS file name: ‘bundle_style. CSS’. Therefore, the packaged CSS files are all overlapped with each other, and only the last packaged c.css can be seenExtractTextPluginPlease refer to my article for the biography ofArticle
As for the requirements you want to achieve, it’s also very simple. You can make a public module. Each entry will load the module, and then match it withCommonsChunkPluginLet the module be extracted as a separate chunk, then all the CSS you load in the module will be finally packed into the same CSS file.

SolidZORO replied 4 weeks ago

Well, to sum up, I think to give aSharing.JsIt’s the simplest solution to go to require CSS, but in this way, any page needs to load oneSharing.CssAnd oneCurrent module.cssNow.

SolidZORO answered 4 weeks ago

Finally, I output all CSS by modifying minchunks.

new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    filename: 'js/bundle_[name].js',
    minChunks: (module, count) => {
        if (/\.css/.test(module.resource)) {
            return true
        }
        else {
            return count >= 2;
        }
    },
}),

Thank you.