上一节我们介绍了如何使用loaders，将style.css文件动态写入到js文件中，在文章末尾，需要解决这样一个问题：
css是通过javascript动态创建标签来写入的，这就意味着样式代码已经编译在index.js文件里。但是实际业务中，可能并不希望这么做，因为随着项目的增大和样式的增多，js的体积会越来越大，而且不能做缓存。这是就需要用到webpack最后一个重要的概念——插件(plugins)。
webpack的插件功能很强大而且可以定制，我们使用一个extract-text-webpack-plugin的插件将散落在各地的css提取出来，并生成一个index.css文件，最终在index.html中通过<link>的形式引入它。
安装extract-text-webpack-plugin：
npm install extract-text-webpack-plugin --save-dev
然后在webpack.config.js中引入插件，并修改rules属性、添加plugins熟悉：
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var config = {
entry: {
main: './index'
},
output: {
path: path.join(__dirname, './dist'),
publicPath: '/dist/',
filename: 'index.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'style-loader'
})
}
]
},
plugins: [
//重命名提取后的css文件
new ExtractTextPlugin('index.css')
]
};
module.exports = config;
在根目录新建other.css，代码如下：
#app {
line-height: 30px;
}
index.js引入other.css，代码如下：
import './style.css';
// var styles = require('./style.css');
import './other.css';
setTimeout(() => {
document.getElementById('app').innerHTML = 'Hello Webpack And Vue!';
}, 5000);
在index.html引入声明的index.css文件(与webpack.config.js文件plugins声明的文件名一致)，代码如下：
//其他代码省略
<link rel="stylesheet" href="dist/index.css">
重新启动，发现字体颜色、大小、行间距发生了变化，打开控制台发现<style>标签没有了，打开index.css文件，代码如下：
发现已经将style.css和other.css的内容合并至index.css中。
至此，我们完成了一个简单的plugins使用示例。
完整代码github地址：https://github.com/zhiyuanMain/zhihu-daily
