不抽取用於提取text-webpack-plugin的常見塊的CSS

Question

不確定這是一個錯誤還是隻是我的設置，我使用CommonsChunkPlugin爲我的項目中的三個入口點獲取單獨的common.js，並且使用extract-text-webpack-plugin獲取css文件。我的入口點是應用程序，登錄和註冊。我能夠獲得：

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

對CSS：

app.css 
register.css 
login.css 

我似乎無法得到common.css產生。所有的CSS都塞進一個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每個條目點（僅顯示一個）：

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

我有一個非常類似的設置，並設法讓它工作。對我而言，關鍵部分是在.js文件中導入常見樣式，而不是在.scss文件中。

這裏是我簡而言之項目：

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

---

我最初的做法是進口common/main.scss其他.scss文件，例如

app/main.scss：

@import '../common/main' 

// styles specific for app 

，但沒有工作，我想出了上面的解決方案。

另外，在我的情況下，需要添加chunksSortMode: 'manual'，因爲HtmlWebpackPlugin有時包括錯誤順序的腳本。