webpack处理CSS

webpack想打包CSS文件，需要安装两个loader模块,css-loader和style-loader

yarn add css-loader style-loader -D

安装完成之后，在webconfig.js文件中进行配置

    module: {       // 配置 webpack 使用到的模块
        rules: [
            {
                test: /\.css$/,     // 针对 .css 结尾的文件，使用下面的loader进行处理
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ],
    }

打包配置.less文件需要安装两个模块less less-loader。

yarn add less less-loader -D

安装完成之后配置如下

    module: {       // 配置 webpack 使用到的模块
        rules: [
            {
                test: /\.css$/,     // 针对 .css 结尾的文件，使用下面的loader进行处理
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.less/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'       // less-loader将less语法转成常规的css语法
                ]
            }
        ],
    }

webpack可以把css代码抽离为单个文件。抽离单个文件需要使用mini-css-extract-plugin

yarn add mini-css-extract-plugin -D

安装完成之后，配置如下。重点是注释部分

let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin")
let MiniCssExtract = require('mini-css-extract-plugin') // 引入插件

module.exports = {
    mode: "production",
    entry: "./src/index.js",
    output: {
        filename: "index.js",
        path: path.resolve(__dirname, "build")
    },
    plugins: [      // 配置插件
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true
            },
            hash: true
        }),
        new MiniCssExtract({        // 创建该插件的实例
            filename: 'main.css'    // 指定输出的css文件的文件名
        })
    ],
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    MiniCssExtract.loader, // 配置规则，将处理后的css代码直接输出到指定文件中
                    'css-loader',
                    'postcss-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtract.loader, // 配置规则，将处理后的css代码直接输出到指定文件中
                    'css-loader',
                    'less-loader',
                    'postcss-loader'
                ]
            }
        ]
    }
}

配置完成之后为出现一个main.css文件
在main.css中，发现没有给css生成相对应得前缀。要解决这个问题，需要使用postcss-loader 和autoprefixer，安装命令如下

yarn add postcss-loader autoprefixer -D

使用如下。重点是注释

let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin")
let MiniCssExtract = require('mini-css-extract-plugin')

module.exports = {
    mode: "production",  
    entry: "./src/index.js", 
    output: {  
        filename: "index.js",  
        path: path.resolve(__dirname, "build")  
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true
            },
            hash: true
        }),
        new MiniCssExtract({
            filename: 'main.css'
        })
    ],
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    MiniCssExtract.loader,
                    'css-loader',
                    'postcss-loader'        // 给CSS3属性添加前缀
                ]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtract.loader,
                    'css-loader',
                    'less-loader',
                    'postcss-loader'        // 给CSS3属性添加前缀
                ]
            }
        ]
    }
}

在上面代码中，指定使用postcss-load老处理.css和.less文件，但是现在还不能添加css3属性前缀，还需要配置postcss-loader。在项目的根目录创建postcss.config.js文件

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

这个时候编译就给css3属性添加了前缀
为了项目的体积需要对main.css文件进行压缩。压缩使用optimize-css-assets-webpack-plugin

yarn add optimize-css-assets-webpack-plugin -D

配置如下

let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin")
let MiniCssExtract = require('mini-css-extract-plugin')
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');    // 引入插件

module.exports = {
    optimization: {                         // 配置webpack的优化项
        minimizer: [                        // 配置最小值优化项
            new OptimizeCSSAssetsPlugin()   // 声明css优化插件的实例
        ]
    },
    mode: "production",  
    entry: "./src/index.js", 
    output: {  
        filename: "index.js",  
        path: path.resolve(__dirname, "build")  
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true
            },
            hash: true
        }),
        new MiniCssExtract({
            filename: 'main.css'
        })
    ],
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    MiniCssExtract.loader,
                    'css-loader',
                    'postcss-loader'       
                ]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtract.loader,
                    'css-loader',
                    'less-loader',
                    'postcss-loader'    
                ]
            }
        ]
    }
}

配置完成之后，再次进行打包编译项目，就会得到压缩的nain.css文件
在设置为production生产模式之后，js文件没有被压缩，如果需要对js进行压缩，需要使用插件terser-webpack-plugin

yarn add terser-webpack-plugin -D

配置如下

let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin")
let MiniCssExtract = require('mini-css-extract-plugin')
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');   
let TerserJSPlugin = require('terser-webpack-plugin');      // 引入插件

module.exports = {
    optimization: {                         // 配置webpack的优化项
    minimizer: [                            // 配置最小值优化项
            new OptimizeCSSAssetsPlugin(),
            new TerserJSPlugin()            // 声明js压缩插件的实例
        ]
    },
    mode: "production",  
    entry: "./src/index.js", 
    output: {  
        filename: "index.js",  
        path: path.resolve(__dirname, "build")  
    },

}