webpack使用extractTextPlugin分离css文件时，会将样式直接插入到html的header里，怎么解决？

Question

问题：在使用 webpack 的插件 extract-text-webpack-plugin 做多入口 css 样式分离时，只生成了一个 css 文件（main.css），其余入口的样式被插入到了 html 的 header 里面，现在想把插入到 header 中样式提取出来写进 vender.css 中应该怎么处理？？

我的webpack.config.js配置如下：

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

config = {
    entry: {
        vendor: ['jquery', 'lodash', 'angular', 'angular-ui-router','angular-ui-bootstrap', 'bootstrap'], //公共模块的集合
        main: __dirname + "/app/index.js", //已多次提及的唯一入口文件
    },
    output: {
        path: __dirname + "/build",  // 打包后的文件存放路径
        filename: "[name]-bundle-[hash].js", // 打包后的js文件放到build目录下，需要通过占位符才能打包为多个js文件，否则会依次覆盖文件
    },
    module: {
        rules: [
            {
                test: /(\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",  // 规则提取器
                    use: [{
                        loader: "css-loader",
                        options: {
                            minimize: false,  // 是否压缩
                            modules: true,  // 是否启用 css modules 规范
                            localIdentName: '[name]__[local]--[hash:base64:5]'
                        }
                    },{
                        loader: "postcss-loader"
                    }]
                }),
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            favicon: __dirname + "/app/favicon.ico",
            filename: __dirname + '/build/index.html', //打包后的 html 文件名及路径
            template: __dirname + "/app/index.html", // html模板路径
            inject: 'body', // 指定打包好的<script>标签插入的位置
            hash: true, //为静态资源生成hash值
            chunks: ['main', 'common'] // 给页面指定要打包的js模块， common 来自 CommonsChunkPlugin 插件提取的公共代码
        }),
        // 如果入口有多个节点，可以有选择的提取公共代码，生成一个common.js
        new webpack.optimize.CommonsChunkPlugin({
            name:'common', // 注意不要.js后缀
            chunks: ['main', 'vendor']
        }),
        new ExtractTextPlugin("[name]-bundle-[hash].css")
    ],
    devtool: 'eval'
};
module.exports = config;

运行webpack后生成的文件如下图：

可以看到期望生成的 js 文件都正常，但是期望生成的 vender-bundle-[hash].css 文件却没有生成，只生成了 main-bundle-[hash].css 。而在浏览器中查看页面，发现 html 的 header 中插入了 style 标签，分析看应该是入口 entry 中 vendor 中引入的模块产生的样式，如下图所示：

怎样才能将插入到页面样式提取出来呢？？大神们帮忙解答一下啊，不胜感激~

Answer 1

webpack4+的extractTextPlugin已经被废弃了。代替方案为mini-css-extract-plugin