不抽取用于提取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有时包括错误顺序的脚本。