webpack4多个css单独打包,vuecli3项目中webpack4配置（五）打包css

如果我们的项目是用vuecli3搭建的，在我们配置vue.config.js时，基本上不涉及对css的打包配置，是因为vue-cli-service里面已经帮我们做好了，但是还是很有必要来了解下的。

一. css提取

webpack4提取css用的插件名称是MiniCssExtractPlugin，此插件将CSS提取到单独的文件中。它为每个包含CSS的JS文件创建一个CSS文件。它支持按需加载CSS和SourceMap。在webpack4之前都是用的extract-text-webpack-plugin插件。相比之前的插件MiniCssExtractPlugin的优势如下：

支持异步加载

不会有重复的编译

更容易使用

特定于css

MiniCssExtractPlugin的基本用法：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {

plugins: [

new MiniCssExtractPlugin({

// both options are optional

filename: '[name].css',

chunkFilename: '[id].css',

}),

],

module: {

rules: [

{

test: /\.css$/,

use: [

{

loader: MiniCssExtractPlugin.loader