先上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呢?
