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