webpack4样式篇(抽离压缩css)

最新推荐文章于 2024-05-14 10:26:59 发布

原创最新推荐文章于 2024-05-14 10:26:59 发布 · 985 阅读

2 ·

CC 4.0 BY-SA版权

webpack4 专栏收录该内容

5 篇文章

订阅专栏

本文是样式打包的下篇，重点讨论如何在webpack4中进行CSS的抽离与压缩。内容涵盖不同配置下的抽离效果，如不支持压缩的抽离，以及支持压缩的抽离和压缩。通过配置示例，详细展示了从无到有，再到压缩的完整过程，最终实现将CSS以单独文件形式引入，并进行压缩。

`webpack4`样式篇(下)

上一篇总结了样式打包的配置，这一篇主要总结如何抽离出css，压缩css，压缩js

其中涉及到的plugin：

mini-css-extract-plugin
optimize-css-assets-webpack-plugin
terser-webpack-plugin

`plugin`	作用
`mini-css-extract-plugin`	把`css`抽离成单独的文件
`optimize-css-assets-webpack-plugin`	把抽离出来的`css`代码压缩
`terser-webpack-plugin`	压缩`js`代码

注意：

uglifyjs-webpack-plugin作用：压缩is代码，不支持压缩es6
terser-webpack-plugin作用：压缩is代码，支持压缩es6

其中涉及到的loader：

MiniCssExtractPlugin.loader

`loader`	作用
`MiniCssExtractPlugin.loader`	把`css`抽离成单独的文件

配置过程：

没使用任何css和js插件
css没有抽离压缩，js没有压缩
使用mini-css-extract-plugin抽离css
css被抽离成单独的文件，但是还没有被压缩
使用optimize-css-assets-webpack-plugin压缩抽离出来的css，使用terser-webpack-plugin压缩js
此时js被压缩，第二步抽离出来的css文件也被压缩
运行配置好后的代码

这种方式是生成单独的css文件，不再是把样式打包进入头部的style标签，而是以link的方式引入抽离出来的css

总的配置：


const path = require('path');
const HtmlWebpackPlugin  = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const Webpackbar = require('webpackbar');
module.exports = {
    // production模式自动压缩html,js,css,不用额外使用terser-webpack-plugin来压缩js
    // 但是如果要分离css,不管是dev还是prod都需要使用mini-css-extract-plugin
    // 但是如果要压缩分离出来的css,不管是dev还是prod都需要使用optimize-css-assets-webpack-plugin
    mode: 'development',
    entry: {
        main: './src/index.js'
    },
    output: {
        filename: '[name]_[hash:8].js',
        path: path.resolve(__dirname,'../build'),
        publicPath: './'
    },
    plugins:[
        // 打包之后自动生成index.html文件
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html'
        }),
        // 打包之前自动删上一次的打包结果
        new CleanWebpackPlugin(),
        // 打包时候的进度条
        new Webpackbar({color: 'purple'}),
        // 抽离css
        new MiniCssExtractPlugin({
            filename: "css/[name]_[hash:8].css",
            chunkFilename: "[id].css"
        }),
        // 压缩css
        new OptimizeCssAssetsPlugin(),
        // 压缩js
        new TerserJSPlugin(),
    ],
    module: {
        rules:[
            {
                test:/\.css$/,
                use: [
                    // 这里一定要使用MiniCssExtractPlugin.loader才能达到抽离css的效果
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    'css-loader',
                    'postcss-loader',
                    'less-loader'
                ]
            }
        ]
    }
}