去除没用到的css需要用到purifycss-webpack插件,而这个插件又依赖于purify-css

1.安装

npm i purifycss-webpack purify-css -D

2.加入插件

//...
plugins:[
new extractPlugin('css/index.css'),
new purifycss({
paths: glob.sync(path.resolve(__dirname,'./src/**/*.html'))
})
]

一定要跟extractPlugin一起用才行,如果是内置在bundle.js里面就不能过滤掉没用的css,这里还采用了glob.sync来进行同步读取html

webpack插件去除没用到的css的更多相关文章

  1. 【Web】阿里icon图标webpack插件(webpack-qc-iconfont-plugin)详解

    webpack-qc-iconfont-plugin webpack-qc-iconfont-plugin是一个webpack插件,可以轻松地帮你将阿里icon的图标项目下载至本地 开发初衷 之前已经 ...

  2. webpack 插件拾趣 (1) —— webpack-dev-server

    结束了一季的忙碌,我这封笔已久的博客也终究该从春困的咒印中复苏,想来写些实用易读的作为开篇,自然是最好不过. 新开个 webpack 插件/工具介绍的文章系列,约莫每周更新一篇篇幅适中的文章聊以共勉, ...

  3. webpack插件自动加css3前缀

    想要webpack帮忙自动加上“-webkit-”之类的css前缀,我们需要用到postcss-loader和它的插件autoprefixer 1.安装 npm i postcss-loader au ...

  4. 探寻 webpack 插件机制

    webpack 可谓是让人欣喜又让人忧,功能强大但需要一定的学习成本.在探寻 webpack 插件机制前,首先需要了解一件有意思的事情,webpack 插件机制是整个 webpack 工具的骨架,而 ...

  5. myeclipse svn 插件去除已经保存的密码方法

    myeclipse svn 插件去除已经保存的密码方法   删除掉C:\Documents and Settings\hao\Application Data\Subversion\auth\svn. ...

  6. 编写webpack 插件

    Webpack插件为第三方开发者释放了Webpack的最大可能性.利用多级回调开发者可以把他们自己的需要的功能引入到Webpack里面来.Build插件比Build loader 更进一步.因为你需要 ...

  7. 从0开始编写webpack插件

    1. 前言 插件(plugins)是webpack中的一等功臣.正是由于有了诸多插件的存在,才使得webpack无所不能.在webpack源码中也是使用了大量的内部插件,插件要是用的好,可以让你的工作 ...

  8. webpack插件之webpack-dev-server

    webpack插件之webpack-dev-server webpack插件 自动化 webpack-dev-server  现在只需要使用 npm run build指令就可以自动打包,并自动处理好 ...

  9. webpack插件之htmlWebpackPlugin

    webpack插件之htmlWebpackPlugin webpack插件 自动化 htmlWebpackPlugin  由于webpack已经帮我们处理好js之间的依赖关系,现在我们可以忽略js的加 ...

随机推荐

  1. python装饰器 练习

    用类作为装饰器 练习一 最初代码 class bol(object): def __init__(self, func): self.func = func def __call__(self): r ...

  2. Codeforces 946D - Timetable (预处理+分组背包)

    题目链接:Timetable 题意:Ivan是一个学生,在一个Berland周内要上n天课,每天最多会有m节,他能逃课的最大数量是k.求他在学校的时间最小是多少? 题解:先把每天逃课x节在学校呆的最小 ...

  3. Linux 僵尸进程

    Linux 允许进程查询内核以获得其父进程的 PID,或者其任何子进程的执行状态.例如,进程可以创建一个子进程来执行特定的任务,然后调用诸如 wait() 这样的一些库函数检查子进程是否终止.如果子进 ...

  4. Azkaban集群部署

    一.部署模式 solo-server模式  (使用内置h2存储元数据): two-server模式 (1个webServer,1个execServer在同一服务器上,使用mysql存储元数据): mu ...

  5. 微软职位内部推荐-Senior Software Development Engineer_Commerce

    微软近期Open的职位: Are you looking for a high impact project that involves processing of billions of dolla ...

  6. 第二阶段Sprint10

    昨天:查看有关“共享平台”的资料,看如何实现上传下载功能,并尝试编码,没有成功 今天:集合三个人的代码,整合到一起,修复出现的Bug 遇到的问题:看Bug没有出现,但功能不是停止运行就是部分不能用,只 ...

  7. Do in SDN

    Do in SDN 书籍 <深度解析SDN 利益.战略.战术.实践> 张卫锋 <重构网络-SDN构架与实现>杨泽卫.李呈 <软件定义网络核心原理与应用实践> 黄韬. ...

  8. Beta冲刺——day1

    Beta冲刺--day1 作业链接 Beta冲刺随笔集 github地址 团队成员 031602636 许舒玲(队长) 031602237 吴杰婷 031602220 雷博浩 031602134 王龙 ...

  9. json-server(copy)

    https://blog.csdn.net/wangle_style/article/details/79455508(原文章地址) 新版vue-cli如何使用json-server来mork 原创  ...

  10. webpack 搭建vue项目流程

    1.安装node 2.打开命令行输入  npm install -g vue-cli 3.vue init webpack-simple vue 4.各种确认(enter键) 5.npm instal ...