初探webpack4--提取分離CSS單獨打包

1、webPack提取分離CSS單獨打包(ExtractTextPlugin、mini-css-extract-plugin)
　　處理效果:
　　　　將所有的入口chunk(entry chunks)中引用的CSS,移動到獨立分離的CSS文件

　　　　ExtractTextPlugin插件
　　　　　　安裝(下載)
　　　　　　　　npm install --save-dev extract-text-webpack-plugin@next

　　　　　　配置config文件
　　　　　　　　//引入插件
　　　　　　　　const ExtractTextPlugin = require('extract-text-webpack-plugin')
　　　　　　　　Rules配置:
　　　　　　　　　　fallback:編譯后用什么loader來提取CSS文件
　　　　　　　　　　module:{
　　　　　　　　　　　　rules: [
　　　　　　　　　　　　　　{
　　　　　　　　　　　　　　　　test: '/.css$/',
　　　　　　　　　　　　　　　　use: ExtractTextPlugin.extract({
　　　　　　　　　　　　　　　　　　fallback: 'style-loader',
　　　　　　　　　　　　　　　　　　use: 'css-loader'
　　　　　　　　　　　　　　　　})
　　　　　　　　　　　　　　}
　　　　　　　　　　　　]
　　　　　　　　　　}
　　　　　　配置插件:
　　　　　　　　new ExtractTextPlugin('./css/index.css')

　　　　mini-css-extract-plugin插件
　　　　　　　安裝(下載)
　　　　　　　　　npm install --save-dev mini-css-extract-plugin
　　　　　　　配置config文件
　　　　　　　　　const MiniExtractTextPlugin = require('mini-css-extract-plugin')

　　　　　　　　　Rules配置:
　　　　　　　　　　　fallback:編譯后用什么loader來提取CSS文件
　　　　　　　　　　　module:{
　　　　　　　　　　　　　rules: [
　　　　　　　　　　　　　　　{
　　　　　　　　　　　　　　　　　test: '/.css$/',
　　　　　　　　　　　　　　　　　use: [MiniExtractTextPlugin.loader, 'css-loader']
　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　]
　　　　　　　　　　　}
　　　　　　　配置插件:
　　　　　　　　　new MiniExtractTextPlugin(filename: './css/[name].css')