webpack4构建简单前端框架-----less/sass/stylus/css的单独打包及压缩

最新推荐文章于 2024-08-09 07:30:56 发布

MAXLZ

最新推荐文章于 2024-08-09 07:30:56 发布

阅读量1.2k

点赞数 1

分类专栏：【Web前端】webpack 文章标签： webpack4 css分离样式分离

本文链接：https://blog.csdn.net/qq_33635385/article/details/85326830

版权

【Web前端】webpack 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

由于之前项目webpack打包后，css、less、sass、stylus会合并到js中，不太符合规范。所以我们要把css、less、sass、stylus分离出来，单独打包成一个css文件。

一、配置loader

cnpm install css-loader post-loader autoprefixer --save-dev // post-loader autoprefixer用于自动添加前缀

cnpm install less less-loader --save-dev // 安装less-loader

cnpm install node-sass sass-loader -D // 安装sass-loader

cnpm i stylus stylus-loader -D // 安装stylus-loader

在webpack.config.js中配置loader(注意loader先后顺序)

rules: [
            {
                test: /\.css$/,
                use:[ // 由后向前加载
                    MiniCssExtractPlugin.loader,
                    {loader: 'css-loader'},
                    {loader: "postcss-loader"}
                ]
            },
            {
                test: /\.less$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    {loader: 'css-loader'},
                    {loader: "postcss-loader"},
                    {loader: 'less-loader'}
                ]
            },
            {
                test: /\.sass$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {loader: 'css-loader'},
                    {loader: "postcss-loader"},
                    {loader: 'sass-loader'}
                ]
            },
            {
                test: /\.styl$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {loader: 'css-loader'},
                    {loader: "postcss-loader"},
                    {loader: 'stylus-loader'}
                ]
            }
        ]
    },

这里要使用postcss还需要在根目录添加postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer') // 自动补充前缀
    ]
}

上面的MiniCssExtractPlugin见下面.

二、分离css

安装mini-css-extract-plugin

cnpm i mini-css-extract-plugin -D

在webpack.config.js配置mini-css-extract-plugin

const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 分离css

module.export = {
    ...
    plugins: [
       new MiniCssExtractPlugin({
            filename: '../css/[name].css'
        })
    ],
    ...
}

三、CSS压缩去重

安装optimize-css-assets-webpack-plugin用于压缩去重及合并。

cnpm i optimize-css-assets-webpack-plugin -D

在webpack.config.js配置optimize-css-assets-webpack-plugin

plugins:[
    ...
    new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.css$/g,
            cssProcessor: require('cssnano'),
            cssProcessorPluginOptions: {
                preset: [
                    'default',
                    { discardComments: { removeAll: true } }
                    ],
            },
            canPrint: true
        })
]