webpack配置之-初认识mini-css-extract-plugin

webpack 我初步理解为对各JS模块进行打包的工具 对js文件,可在entry 中配置你想打包的JS文件,再到output中配置打包出口

而CSS非js模块,webpack打包时借助loader去编译转换成webpack可以打包的模块

拿代码中的scss文件来说:

A.js
import ./index.scss
...

index.scss
.box{
	...
}

webpack中配置如下:(忽略开发与发布模式)

module.exports = {
	entry:'./A.js',
    output:{
    	filename:'[name].js'
    },
    module:{
    rules:[
    	{
    	   test:/\.(scss|sass|css)$/,
            use:[
                'style-loader','css-loader','postcss-loader','sass-loader'
            ]
    	}
    ]
    ．．．
    }
}

css部分这里配置后,css会压缩打包到页面的header中style部分,一般情况下,这样就可以满足基本开发需求 但是,当css文件比较大时,header里面插入的style会很大,另外,这部分是随着js去加载,某些特殊场景,需要在js加载前进行样式处理的话就会有问题,所以需要一种可以单独打包css的方式来处理这类问题

webpack4中mini-css-extract-plugin就可以解决这个问题 配置如下

const MiniCssPlugin = require('mini-css-extract-plugin')
module.exports = {
	entry:'./A.js',
    output:{
    	filename:'[name].js'
    },
    module:{
    rules:[
    	{
    	   test:/\.(scss|sass|css)$/,
            use:[
                isProduction ? MiniCssPlugin.loader : 'style-loader','css-loader','postcss-loader','sass-loader'
                //判断如果是开发环境,就还是style嵌入即可,如果是生产环境,则单独打包成css
            ]
    	}
    ]
    ．．．
    },
    plugins:[
    	new MiniCssPlugin({
            filename:"[name].css",//此处类似js的output,是css文件打包后的名称,还有更多参数配置,详见webpack官网配置
        }),
    ]
}

上面配置后,则会在打包文件里面生成一个css文件,完成单独打包需求,实现的比较简单,在此基础上还可以进行更丰富的处理,后面会持续更新