每個webpack塊提取一個css文件（require.ensure）

在我們的應用中嘗試實現頁面優化時，我們希望能夠爲每個webpack塊生成單獨的CSS文件，以提高我們應用中第一頁的頁面呈現性能。爲了實現這一目標，我們一直在努力結合使用提取文本，插件與require.ensure像這樣：每個webpack塊提取一個css文件（require.ensure）

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(), 
    ] 
}

與app.js之中：

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');

和a.css之中：

.a { 
    color: red; 
}

和b.css感：

.b { 
    color: red; 
}

和c.ss之中：

.a { 
    color: red; 
} 

.b { 
    color: red; 
} 

.c { 
    color: red 
} 


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

我們如何去提取一個CSS：

.c { 
    color: red 
}

問題是我們與所有3塊的內容只得到一個CSS文件dist/app.e2e9da337e9ab8b0ca431717de3bea22.css文件每個webpack塊（require.ensure）在這種情況下？如果這甚至可以通過extract-text-plugin來支持。

PS：這裏有一個例子展示庫這個問題 - https://github.com/osdevisnot/extract-text-demo

來源

2017-03-08 osdev isnot

提取文本 - 插件不上分割點提取。
通過傳遞 {allChunks: true}它提取所有塊中的所有css並放入一個css文件。
但它不能解決你的問題。

爲此，您可以嘗試extract-css-chunks-webpack-plugin專門爲此使用情況使用extract-text-plugin構建。

來源

2017-05-27 14:14:54

每個webpack塊提取一個css文件（require.ensure）

回答

相關問題