webpack的css配置

npm i style-loader css-loader -D 处理css模块下载

想配合使用less 还需下载 npm i less less-loader -D
使用sacc 下载 node-sass sass-loader -D
css-loader
这个loader可以处理css文件 并解析css代码
style-loader
这个loader生成style标签 并把style标签插入到head标签后面
less-loader
这个loader可以处理less文件 并解析less代码
sass-loader
这个loader可以处理sass文件 并解析sass代码
npm i postscc-loader -D 处理css前缀兼容
使用postcss需要在跟目录配置postscc.config.js文件

const path = require('path')
module.exports = {
    mode:'development'		,//打包后的代码在开发环境中 打包后的代码不会被压缩
    entry:'./src/index.js',			//打包的文件入口
    output:{        //打包后文件的输入地址
        path:path.join(__dirname,'bundle'),//path必须是个绝对路径
    },
    module:{
        rules:[
            {
                test:/\.css$/,//匹配到css结尾
                use:['style-loader','css-loader']    //单独使用css样式
            },
            {
                test:/\.less$/,//匹配到less结尾
                use:[								//单独使用 less 样式
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            }
        ]
    }
}

或者中间部分写成 less和css 一起使用

    module:{
        rules:[
            {
                   test:/\.(css|less)$/,	 //匹配到css,less的css样式文件结尾
                use:[
                    'style-loader',
                   { 
                   		loader: 'css-loader',
                  	 options: {
                  	 	 importLoaders: 2    //代表css都会在后面两个	loader中都会执行一次 
                  	 	 } 
                  	},
                    'less-loader'
                    "postscc-loader"
                ]
            }
        ]
    }

使用sacc和css

    module:{
        rules:[
            {
                   test:/\.(css|sass)$/,	 //匹配到css,less的css样式文件结尾
                use:[
                    'style-loader',
                  	{ loader: 'css-loader',
                  	 options: {
                  	 	 importLoaders: 2    //代表css都会在后面两个	loader中都会执行一次 
                  	 	 } 
                  	},
                    'sass-loader',
                   'postscc-loader'
                ]
            }
        ]
    }

npm i autoprefixer -D 与postscc搭配处理兼容 必须有

postscc.config.js文件

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

如果想多个匹配浏览器兼容
在package.json中的最后加上

"browserslist":"[
	配置https://www.npmjs.com/package/browserslist/v/2.11.3
	"> 5%",
	"ie 6-8"
]"

npm i mini-css-extract-plugin -D
把css代码打包成一个css文件

npm i optimize-css-assets-webpack-plugin -D
压缩打打包后的css文件

在wabpack中打包压缩代码 与entry同级

// 使用了 mini-css-extract-plugin 插件 style-loader就不能再使用 
的更换成		loader: MiniCssExtractPlugin.loader

引入
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');  


 plugins:[
        new MiniCssExtractPlugin({
            filename:'css/[name].css'					//输出文件名 ,地址名
        }),
        new OptimizeCssAssetsPlugin(),    //压缩
    ]