webpack打包提取css到獨立文件

將本來鑲嵌在bundle.js的css轉到外面來，我們需要用到一個插件：extract-text-webpack-plugin

使用方法：

1.安裝

npm i extract-text-webpack-plugin -D

2.配置

let extractPlugin = require('extract-text-webpack-plugin');

//....
plugins:[
    new extractplugin('css/index.css')
],
module:{
    rules:[
        {
            text: /\.scss$/,
            use: extractPlugin.extract({
                use: ['css-loader','sass-loader'],
                fallback: 'style-loader'
            })
        }
    ]
}

在plugins只是new了一個插件實例，loader部分的fallback就是將style-loader的輸出接口接到index.css上。

這樣我們就可以將css的代碼都取出來放在css/index.css里面了，同時插件能自動添加index.css的引入到html的頭部