上一節(jié)我們介紹了如何使用loaders，將style.css文件動態(tài)寫入到j(luò)s文件中，在文章末尾，需要解決這樣一個問題：
css是通過javascript動態(tài)創(chuàng)建標(biāo)簽來寫入的，這就意味著樣式代碼已經(jīng)編譯在index.js文件里。但是實際業(yè)務(wù)中，可能并不希望這么做，因為隨著項目的增大和樣式的增多，js的體積會越來越大，而且不能做緩存。這是就需要用到webpack最后一個重要的概念——插件(plugins)。
webpack的插件功能很強(qiáng)大而且可以定制，我們使用一個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">
重新啟動，發(fā)現(xiàn)字體顏色、大小、行間距發(fā)生了變化，打開控制臺發(fā)現(xiàn)<style>標(biāo)簽沒有了，打開index.css文件，代碼如下：
發(fā)現(xiàn)已經(jīng)將style.css和other.css的內(nèi)容合并至index.css中。
至此，我們完成了一個簡單的plugins使用示例。
完整代碼github地址：https://github.com/zhiyuanMain/zhihu-daily
