extract-text-webpack-pluginを使用して共通のチャンクでCSSが抽出されない

Question

これはバグであるか、私の設定であるかわからない場合、CommonsChunkPluginを使用してプロジェクトの3つのエントリポイントに対してcommon.jsを、 cssファイルを取得するには、extract-text-webpack-pluginを使用します。私のエントリーポイントはapp、login、registerです。私が取得することができています：

app.js 
app.vendor.js 
login.js 
register.js 
common.js 

CSSの：

app.css 
register.css 
login.css 

私はcommon.cssが発生したように見えることはできません。すべてのcssは1つのapp.cssファイルにまとめられます。

私のプロジェクトはvuetifyのWebPACKのテンプレートに基づいて設定される：ここで https://github.com/vuetifyjs/webpack-advanced

は私の設定です：

3のエントリポイント：

module.exports = { 
    entry: { 
    app: './src/main.js', 
    login: './src/Login/login.js', 
    register: './src/Register/register.js' 
}, 

プラグイン - 私は、各エントリのHtmlWebpackPluginを持っていますポイント（1つのみ表示）：

new HtmlWebpackPlugin({ 
    filename: process.env.NODE_ENV === 'testing' 
    ? 'index.html' 
    : config.build.index, 
    template: 'index.html', 
    inject: false, 
    hash: true, 
    minify: { 
    removeComments: true, 
    collapseWhitespace: true, 
    removeAttributeQuotes: false, 
    minifyJS: true 
    }, 
    chunksSortMode: appChunkOrder 
}), 

の

共通チャンク：

new webpack.optimize.CommonsChunkPlugin({ 
    name: 'app.vendor', 
    chunks: ['app'], 
    minChunks: isVendor, 
}),  
new webpack.optimize.CommonsChunkPlugin({ 
    name: 'login.vendor', 
    chunks: ['login'], 
    minChunks: isVendor, 
}), 
new webpack.optimize.CommonsChunkPlugin({ 
    name: 'register.vendor', 
    chunks: ['register'], 
    minChunks: isVendor, 
}),  
// Extract chunks common to both app and login 
new webpack.optimize.CommonsChunkPlugin({ 
    name: 'common', 
    chunks: ['app.vendor', 'login.vendor', 'register.vendor', 'app', 'login', 'register'], 
    minChunks: (module, count) => count >= 2 && isVendor(module), 
}), 

フル設定：

plugins: [ 
new webpack.DefinePlugin({'process.env': env }), 
new webpack.optimize.UglifyJsPlugin({ 
    compress: { 
    warnings: false 
    }, 
    sourceMap: true 
}), 
// extract css into its own file 
new ExtractTextPlugin({ 
    filename: utils.assetsPath('css/[name].[contenthash].css') 
}), 
new OptimizeCSSPlugin({ 
    cssProcessorOptions: { 
    safe: true 
    } 
}), 
// generate Html index files for 3 entries: 
new HtmlWebpackPlugin({ 
    filename: process.env.NODE_ENV === 'testing' 
    ? 'index.html' 
    : config.build.index, 
    template: 'index.html', 
    inject: false, 
    hash: true, 
    minify: { 
    removeComments: true, 
    collapseWhitespace: true, 
    removeAttributeQuotes: false, 
    minifyJS: true 
    }, 
    chunksSortMode: appChunkOrder 
}), 
new HtmlWebpackPlugin({ 
    filename: process.env.NODE_ENV === 'testing' 
    ? 'src/Login/login.html' 
    : config.build.login, 
    template: 'src/Login/login.html', 
    inject: false, 
    hash: true, 
    minify: false, 
    chunksSortMode: loginChunkOrder 
}), 
new HtmlWebpackPlugin({ 
    filename: process.env.NODE_ENV === 'testing' 
    ? 'src/Register/register.html' 
    : config.build.register, 
    template: 'src/Register/register.html', 
    inject: false, 
    hash: true, 
    minify: false, 
    chunksSortMode: registerChunkOrder 
}),  
// Chunks: 
new webpack.optimize.CommonsChunkPlugin({ 
    name: 'app.vendor', 
    chunks: ['app'], 
    minChunks: isVendor, 
}),  
new webpack.optimize.CommonsChunkPlugin({ 
    name: 'login.vendor', 
    chunks: ['login'], 
    minChunks: isVendor, 
}), 
new webpack.optimize.CommonsChunkPlugin({ 
    name: 'register.vendor', 
    chunks: ['register'], 
    minChunks: isVendor, 
}),  
// Extract chunks common to both app and login 
new webpack.optimize.CommonsChunkPlugin({ 
    name: 'common', 
    chunks: ['app.vendor', 'login.vendor', 'register.vendor', 'app', 'login', 'register'], 
    minChunks: (module, count) => count >= 2 && isVendor(module), 
}), 
// copy custom static assets 
new CopyWebpackPlugin([ 
    { 
    from: path.resolve(__dirname, '../static'), 
    to: config.build.assetsSubDirectory, 
    ignore: ['.*'] 
    } 
]) 

任意の助けに感謝！

Answer 1

私は非常に似た設定をしており、それを稼働させることができました。私にとっては、重要な部分は.scssファイルの代わりに.jsファイルに共通のスタイルをインポートすることでした。

ここに私のプロジェクトは、一言で言えばです：

common/ 
    main.scss <-- common styles 
app/ 
    index.js 
    main.scss <-- styles specific for app 
admin/ 
    index.js 
    main.scss <-- styles specific for admin 
registration/ 
    index.js 
    main.scss <-- styles specific for registration 
base.html 
webpack.config.js 

---

app/index.js：

import '../common/main' // <-- this did the trick! 
import './main' 

// some js... 

両方admin/index.jsとregistration/index.jsは非常に似ています。

---

webpack.config.js（一部ES6の構文を使用して唯一の重要な部分、）：

const entries = { 
    app: 'app/index.js', 
    admin: 'admin/index.js' 
    registration: 'registration/index.js', 
}; 

const commonChunks = [ 
    'vendor', 
    'common', 
]; 

function isVendor(module) { 
    if (typeof module.context !== 'string') { 
    return false; 
    } 
    return module.context.indexOf('node_modules') !== -1; 
} 

export default { 
    entry: {...entries}, 

    // ... 

    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: 'common', 
     filename: '[name].bundle.js', 
     minChunks: 2 
    }), 

    new webpack.optimize.CommonsChunkPlugin({ 
     name: 'vendor', 
     filename: '[name].bundle.js', 
     chunks: [...Object.keys(entries), 'common'], 
     minChunks: function(module) { 
     return isVendor(module); 
     } 
    }), 

    new ExtractTextPlugin({ 
     filename: '[name].bundle.css' 
    }), 

    new HtmlWebpackPlugin({ 
     template: path.resolve(__dirname, 'base.html'), 
     filename: 'app.html', 
     chunks: [...commonChunks, 'app'], 
     chunksSortMode: 'manual' 
    }), 

    new HtmlWebpackPlugin({ 
     template: path.resolve(__dirname, 'base.html'), 
     filename: 'admin.html', 
     chunks: [...commonChunks, 'admin'], 
     chunksSortMode: 'manual' 
    }), 

    new HtmlWebpackPlugin({ 
     template: path.resolve(__dirname, 'base.html'), 
     filename: 'registration.html', 
     chunks: [...commonChunks, 'registration'], 
     chunksSortMode: 'manual' 
    }) 
    ] 
}; 

---

私の最初のアプローチは、例えば、他の.scssファイルでcommon/main.scssをインポートすることでした

app/main.scss

：

@import '../common/main' 

// styles specific for app 

が、それは動作しませんでしたし、私は上記の解決策を考え出しました。

また、HtmlWebpackPluginには誤った順序でスクリプトが含まれていたため、chunksSortMode: 'manual'を追加する必要がありました。