初探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')