webpack学习（十）：分离压缩css

demo地址: https://github.com/Lkkkkkkg/webpack-demo
继上一次配置完 sass: https://blog.csdn.net/qq593249106/article/details/84933362

分离使用MiniCssExtractPlugin

webpck 4+ 已经将 ExtractTextPlugin 废弃了, 官网也支持使用 MiniCssExtractPlugin 来分离 css, 它相对 ExtractTextPlugin 有更多的优点

安装

npm install mini-css-extract-plugin --save-dev 

MiniCssExtractPlugin用于生产模式

注意 MiniCssExtractPlugin 插件用于生产模式, 如果在开发模式就不要用, 否则在热更新问题上会出现问题, 定义一个变量 devMode 区别是什么模式

配置 webpack.config.js

引入 MiniCssExtractPlugin, 在 rules 修改配置, 并在 plugins 中使用:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var devMode = false; //标志是否开发模式


module.exports = {
    mode: 'development',
    entry: './src/components/index/index.js', //入口文件
    devtool: 'inline-source-map', // 不同选项适用于不同环境
    devServer: {
        contentBase: './dist', //将dist目录下的文件(index.html)作为可访问文件, 如果不写这个参数则默认与webpack.cofig.js的同级目录
        port: 8080 //端口号设为8080, 默认也是8080
    },
    module: {
        rules: [ //配置加载器, 用来处理源文件, 可以把es6, jsx等转换成js, sass, less等转换成css
            {
                exclude: /node_modules|packages/, //路径
                test: /\.js$/, //配置要处理的文件格式，一般使用正则表达式匹配
                use: 'babel-loader', //使用的加载器名称
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader',
                ],
            },
        ]
    },
    plugins: [ //webpack 通过 plugins 实现各种功能, 比如 html-webpack-plugin 使用模版生成 html 文件
        new CleanWebpackPlugin(['dist']), //设置清除的目录
        new HtmlWebpackPlugin({
            filename: 'index.html', //设置生成的HTML文件的名称, 支持指定子目录，如：assets/admin.html
            template: "./src/components/index/index.html" //指定模板文件的位置
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css', //类似出口文件
        }),
    ],
    output: {
        filename: 'bundle.js', //根据入口文件输出不同出口文件
        path: path.resolve(__dirname, 'dist')
    }
};

打包

终端输入 npm run build, 打开 index.html

可以发现引入 css 样式的方式变成了 link, 同时 dist 目录下多了一个 css 文件夹, 里面多了一个 main.css 文件:

|- /dist
  |- /css
     |- main.css //分离出来的css文件
  |- bundle.js //入口文件
  |- index.html
|- /node_modules
|- /node_modules
|- /src //用于放源文件的文件夹
  |- /components
  |- /index //模板文件
    |- index.html //模板文件
    |- index.js //入口文件
    |- App.js //react主文件
    |- index.scss //样式文件
|- package.json
|- webpack.config.js //webpack配置文件

到这里分离 css 完成了, 现在要对分离之后的 css 文件进行压缩

压缩使用OptimizeCSSAssetsWebpackPlugin

它将在Webpack构建期间搜索CSS资源，并将优化\最小化CSS（默认情况下，它使用cssnano，但可以指定自定义CSS处理器）, 解决了extract-text-webpack-plugin CSS重复问题：由于extract-text-webpack-plugin仅捆绑（合并）文本块，如果它用于捆绑CSS，则捆绑包可能具有重复的条目（块可以是重复的，但是当合并时，可以创建重复的CSS）。

安装

npm install optimize-css-assets-webpack-plugin --save-dev

配置 webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var devMode = false; //标志是否开发模式
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');


module.exports = {
    mode: 'development',
    entry: './src/components/index/index.js', //入口文件
    devtool: 'inline-source-map', // 不同选项适用于不同环境
    devServer: {
        contentBase: './dist', //将dist目录下的文件(index.html)作为可访问文件, 如果不写这个参数则默认与webpack.cofig.js的同级目录
        port: 8080 //端口号设为8080, 默认也是8080
    },
    module: {
        rules: [ //配置加载器, 用来处理源文件, 可以把es6, jsx等转换成js, sass, less等转换成css
            {
                exclude: /node_modules|packages/, //路径
                test: /\.js$/, //配置要处理的文件格式，一般使用正则表达式匹配
                use: 'babel-loader', //使用的加载器名称
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader',
                ],
            },
        ]
    },
    plugins: [ //webpack 通过 plugins 实现各种功能, 比如 html-webpack-plugin 使用模版生成 html 文件
        new CleanWebpackPlugin(['dist']), //设置清除的目录
        new HtmlWebpackPlugin({
            filename: 'index.html', //设置生成的HTML文件的名称, 支持指定子目录，如：assets/admin.html
            template: "./src/components/index/index.html" //指定模板文件的位置
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css', //类似出口文件
            chunkFilename: 'css/[id].css'
        }),
        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.css$/g, //一个正则表达式，指示应优化\最小化的资产的名称。提供的正则表达式针对配置中ExtractTextPlugin实例导出的文件的文件名运行，而不是源CSS文件的文件名。默认为/\.css$/g
            cssProcessor: require('cssnano'), //用于优化\最小化CSS的CSS处理器，默认为cssnano。这应该是一个跟随cssnano.process接口的函数（接收CSS和选项参数并返回一个Promise）。
            cssProcessorOptions: { safe: true, discardComments: { removeAll: true } }, //传递给cssProcessor的选项，默认为{}
            canPrint: true //一个布尔值，指示插件是否可以将消息打印到控制台，默认为true
        })
    ],
    output: {
        filename: 'bundle.js', //根据入口文件输出不同出口文件
        path: path.resolve(__dirname, 'dist')
    }
};

打包

终端输入 npm run build, 查看 style.css 文件, 发现已经被压缩为一行, 压缩成功