打包处理css文件

打包处理css文件,先以模块的形式引入js

• 运行npm i style-loader css-loader -D 命令,安装处理css文件的loader
• 在webpack.config.js 的module -> rules 数组中,添加loader

 module.exports = {
        module:{
            rules:[{
                        test:/\.css$/,
                        use:[
                            //创建style标签,将样式放入
                            'style-loader',
                            //处理css文件中的@import和url这样的外部资源.
                            'css-loader'
                        ]
                }]
        }
    }

• test表示匹配的文件类型,use表示对应要调用的loader
• 注意
  use数组中指定的loader顺序是固定的
  多个loader的调用顺序,从后到前.
  将css文件以模块的方式导入入口js文件
  import ‘./index.css’;

将css文件打包成单独文件

• 使用插件 mini-css-extract-plugin 插件
• 下载安装 npm i mini-css-extract-plugin -D
• 引入插件 const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’)
• 使用插件

 plugins: [
        new MiniCssExtractPlugin({
            filename:'./src/css/index.css'
        })
    ] 

• 在rules使用MiniCssExtractPlugin,使css为单文件

module.exports = {
    module:{
        rules:[{
                    test:/\.css$/,
                    use:[
                        //将css文件单独存放
                        MiniCssExtractPlugin.loader,
                        //处理css文件中的@import和url这样的外部资源.
                        'css-loader'
                    ]
            }]
    }
}

处理css的浏览器兼容性

• 使用postcss处理,使用包:post-loader与postcss-preset-env
• 下载安装 npm i postcss-loader postcss-preset-env -D
• 在rules使用post-loader

module.exports = {
        module:{
            rules:[{
                        test:/\.css$/,
                        use:[
                            MiniCssExtractPlugin.loader,
                            'css-loader',
                            //css兼容
                            'postcss-loader'
                        ]
                }]
        }
    }

• 在package.json设置browserslist,加载css的兼容范围,指定兼容的浏览器.

"browserslist":[
        "0.2%", //99.8%浏览器支持
        "last 2 version", //最新版本
        "not dead" //死掉的浏览器就不设置兼容
    ]

• 修改loader配置,新版需要写postcss.config.js,使用postcss-preset-env插件

 module.exports = {
        plugins:[
            require('postcss-preset-env')()
        ]
    }

压缩css

• 使用optimize-css-assets-webpack-plugin插件
• 下载安装 npm i optimize-css-assets-webpack-plugin -D
• 引入插件 const OptimizeCssAssetsWebpackPlugin = require(‘optimize-css-assets-webpack-plugin’)
• 使用插件

plugins: [
        // 调用插件
        new OptimizeCssAssetsWebpackPlugin()
    ]