javascript - webpack的css单独打包,html未引用对应的css-PHP Chinese Network Q&A

先上webpack.dev.config.js的配置文件

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
var path = require('path');
// 引入基本配置
var config = require('./webpack.config');

config.output.publicPath = '/';

config.module = {
    loaders: [ //加载器
        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract("style-loader","css-loader")
        }
    ]
};
config.plugins = [
    // 添加三个插件
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new ExtractTextPlugin('css/style.css', {
        allChunks: false
    }),
    new HtmlWebpackPlugin({
        filename: '../dist/index.html',
        template: path.resolve(__dirname, '../index.html'), 
        inject: true, 
        hash: true,
        minify: { 
            removeComments: true, 
            collapseWhitespace: true
        }
    })
];

// 动态向入口配置中注入 webpack-hot-middleware/client
// var devClient = 'webpack-hot-middleware/client';
var devClient = './build/dev-client';
Object.keys(config.entry).forEach(function(name, i) {
    var extras = [devClient]
    config.entry[name] = extras.concat(config.entry[name])
})

module.exports = config;

使用了extract-text-webpack-plugin插件,并配置到config.plugins数组中.最后打包生成的目录,css也成功的被分离

//使用css的文件
require('../css/common.css')
document.write('Hello LOL');

但是对应的html中未引用该css

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Index主页</title>
    <meta name="description" content="基于webpack的前端工程化开发解决方案探索">

    <body>
        <script src="/js/vendors.js?452fb8b30f09a1cd3642"></script>
        <script src="/js/index.js?452fb8b30f09a1cd3642"></script>
    </body>
</head>

</html>

请问如何自动的让html引用该css呢?