webpack 分离css html,初探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')