先上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
Index主页
请问如何自动的让html引用该css呢?