由浅入深学习webpack+vue全家桶，实现知乎日报--web

上一节我们介绍了如何使用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文件，代码如下：

index.css

发现已经将style.css和other.css的内容合并至index.css中。

至此，我们完成了一个简单的plugins使用示例。

完整代码github地址：https://github.com/zhiyuanMain/zhihu-daily