Webpack chunk başına bir css dosyası çıkarma (require.ensure)

Question

Uygulamamızdaki sayfa optimizasyonlarını uygulamaya çalışırken, uygulamada ilk sayfa için sayfa oluşturma performansını iyileştirmek için web paketi başına ayrı CSS dosyaları oluşturma yeteneğine sahip olmak istiyoruz. Bunu başarmak için, biz şöyle require.ensure birlikte özü-text-eklenti kullanmak çalışıyorlar:

console.log('this is app.js'); 

require.ensure([], require => { 
    require('./a.css'); 
}, 'base'); 

require.ensure([], require => { 
    require('./b.css'); 
}, 'first'); 

require.ensure([], require => { 
    require('./c.css'); 
}, 'second'); 

ve a.css varlığa: app.js varlık ile

const $ = require('load-webpack-plugins')(); 
module.exports = { 
    entry: { 'app': './src/app.js' }, 
    output: { 
    path: 'dist', 
    filename: '[name].js' 
    }, 
    devtool: 'source-map', 
    module: { 
    loaders: [ 
     { test: /\.js$/, use: [{ loader: 'babel-loader' }] }, 
     { 
     test: /\.css$/, 
     use: $.ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: [{ loader: 'css-loader' }] 
     }) 
     } 
    ] 
    }, 
    plugins: [ 
    new $.ExtractTextPlugin({ filename: '[name].[contenthash].css', allChunks: true }), 
    new $.NamedModulesPlugin(), 
    ] 
} 

:

.a { 
    color: red; 
} 

ve b.css varlık:

.b { 
    color: red; 
} 

ve c.ss varlık:

.a { 
    color: red; 
} 

.b { 
    color: red; 
} 

.c { 
    color: red 
} 


/*# sourceMappingURL=app.e2e9da337e9ab8b0ca431717de3bea22.css.map*/ 

biz bir css ayıklanması konusunda gitmek nasıl:

.c { 
    color: red 
} 

Sorun hepimiz 3 parçalar içeriğiyle tek CSS dosyası dist/app.e2e9da337e9ab8b0ca431717de3bea22.css alıyorsanız edilir Bu durumda webpack chunk (require.ensure) başına dosya? Bu özü-metin-eklenti ile desteklenmeli.

Not: Burada bu sorunu gösteren bir örnek depodur - https://github.com/osdevisnot/extract-text-demo

Answer 1

özü-text-eklentisi bölünmüş noktalarında özü değildir.
{allChunks: true}'u geçerek, tüm css'de tüm css'leri ayıklar ve bir css dosyasına yerleştirir.
Ancak sorununuzu çözmez.

Bunun için özellikle bu kullanım örneği için extract-text-plugin kullanılarak oluşturulan extract-css-chunks-webpack-plugin deneyebilirsiniz.