更多内容已经迁移至掘金,欢迎来指导学习:

https://juejin.im/post/5d64c6696fb9a06b03200d0a

1. 安装:打包编译时,可以删除一些html中没有使用的选择器,如果html页面中没有class=a class="b"的元素,.a{}.b{}样式不会加载

cnpm install --save-dev purifycss-webpack purify-css glob

2. webpack.config.js中使用

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


//一定要放在htmlWebpackPlugin后面
new purifycssWebpack({
  paths: glob.sync(path.resolve('./src/*.html'))
}),


webpack.config.js====插件purifycss-webpack,提炼css文件的更多相关文章

  1. webpack.config.js====插件clean-webpack-plugin

    1. 安装:主要是用来清除重复文件,生成最新的的插件 就是说在编译文件的时候,先把 build或dist (就是放生产环境用的文件) 目录里的文件先清除干净,再生成新的带有hash值的文件 cnpm ...

  2. webpack.config.js====插件html-webpack-plugin

    1. 安装 cnpm install html-webpack-plugin --save-dev 2. webpack.config.js中使用 const htmlWebpackPlugin = ...

  3. webpack.config.js配置遇到Error: Cannot find module '@babel/core'&&Cannot find module '@babel/plugin-transform-react-jsx' 问题

    下文是网上找到的方法,是因为版本冲突的原因,参照后安装7版本解决 cnpm install -D babel-loader@ babel-core babel-preset-env 一. 问题描述 在 ...

  4. [转]webpack4.0.1安装问题和webpack.config.js的配置变化

    本文转自:https://blog.csdn.net/jiang7701037/article/details/79403637 The CLI moved into a separate packa ...

  5. webpack前端构建工具学习总结(三)之webpack.config.js配置文件

    Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行.默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一 ...

  6. webpack配置之webpack.config.js文件配置

    webpack配置之webpack.config.js文件配置 webpack.config.js webpack resolve  1.总是手动的输入webpack的输入输出文件路径,是一件非常繁琐 ...

  7. webpack.config.js====CSS相关:插件optimize-css-assets-webpack-plugin

    1. 安装:主要是用来压缩css文件 cnpm install --save-dev optimize-css-assets-webpack-plugin cssnano 2. webpack.con ...

  8. webpack配置:less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件

    一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm inst ...

  9. webpack.config.js====CSS相关:css和scss配置loader

    1. 安装: //loader加载器加载css和sass模块 cnpm install style-loader css-loader node-sass sass-loader --save-dev ...

随机推荐

  1. ACM学习历程——UVA10112 Myacm Triangles(计算几何,多边形与点的包含关系)

    Description   Problem B: Myacm Triangles Problem B: Myacm Triangles Source file: triangle.{c, cpp, j ...

  2. 主库报 Error 12154 received logging on to the standby PING[ARC2]

    主备网络配置存在问题 一系列报错 [root@node1 bin]# ./srvctl  start database -d devdbPRCR-1079 : Failed to start reso ...

  3. 关于CDH

    进入到任何一个Host的页面,点击“components",就可以看到这个主机安装的组件的版本

  4. C# GUID使用总结

    全局唯一标识符(GUID,Globally Unique Identifier) What is GUID 也称作 UUID(Universally Unique IDentifier) . GUID ...

  5. Spring 3.1新特性之三:Spring支持Servlet 3.0(待补充)

    高效并发是JDK 1.6的一个重要主题,HotSpot虚拟机开发团队在这个版本上花费了大量的精力去实现各种锁优化技术,如适应性自旋(Adaptive Spinning).锁削除(Lock Elimin ...

  6. webSocket 简单介绍

    WebSocket :WebSocket协议支持(在受控环境中运行不受信任的代码的)客户端与(选择加入该代码的通信的)远程主机之间进行全双工通信.                       简单的说 ...

  7. MFC ListBox 设置水平长度

    在*.rc资源 设置可以水平滚动, 垂直滚动 但是 水平滚动无效,水平方向 一直无法显示 完整 设置代码如下 m_listBox.SetHorizontalExtent(2000); m_listBo ...

  8. msfvenom 摄像头

    4.13 莫名其妙的心情不好 又回到了那个不想打游戏不想聊天不想说话的日子. 不用想.vm——>kali 很早以前看过用msfvenom生成木马的文章.然后……然后我的浏览器就崩溃了.Firef ...

  9. 352. Data Stream as Disjoint Intervals (TreeMap, lambda, heapq)

    Given a data stream input of non-negative integers a1, a2, ..., an, ..., summarize the numbers seen ...

  10. 51nod1205(johnson)

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1205 题意:中文题诶- 思路:johnson模板题 流水作业调 ...