zoukankan      html  css  js  c++  java
  • webpack9--删除冗余的CSS

    我们在写代码的时候可能有些CSS并没有用到,我们如何利用webpack将冗余的CSS清除掉呢?

    可以使用 purifycss-webpack 达到该目的。

    1.安装 purifycss-webpack,glob 和 purify-css

    npm i purifycss-webpack glob purify-css  -D

    2.在配置文件中引入 purifycss-webpack

    const glob = require('glob');
    const PurifyCssWebpack  = require('purifycss-webpack');

    3.在plugins中作如下配置

    plugins: [
         new PurifyCssWebpack({
            paths:glob.sync(path.join(__dirname,'src/*.html'))
        }) 
    ]

    里面的paths是绝对路径,如果你需要多个目录下的html文件,你还需要安装glob-all:

    npm i glob-all -D

    并将该模块引入到配置文件中:

    const glob = require('glob-all');

    paths数组的写法为:

    paths: glob.sync([
      path.join(__dirname, '.html'),
      path.join(__dirname, 'src/.html')
    ]),

    你可以故意写一些多余的CSS,打包完成后,可以看到没用到的CSS已经删除了。

  • 相关阅读:
    Jinja2模板引擎简介
    单元测试
    Blueprint属性
    状态保持中的cookie
    异常捕获abort方法
    数据库迁移
    Flask-SQLAlchemy中 ORM 一对多的模型关系定义步骤
    request请求的常用属性
    搜索引擎
    Mark
  • 原文地址:https://www.cnblogs.com/sese/p/9955784.html
Copyright © 2011-2022 走看看