uglifyjs-webpack-plugin

压缩代码,webpack自带

const uglify = require('uglifyjs-webpack-plugin');

plugins:[
new uglify()
]

html-webpack-plugin

需要安装

new htmlPlugin({
minify:{
removeAttributeQuotes:true,//去掉属性的引号
},
hash:true,
template:'./src/index.html'
})

extract-text-webpack-plugin

css分离到指定文件

new extractTextPlugin('css/index.css') //指定出口

{
test:/\.css$/,
use:extractTextPlugin.extract({
fallback:'style-loader',
use:[{
loader:'css-loader'
}]
})
}

purifycss-webpack

净化css,不会打包没有dom元素的css样式

Q: 如果通过动态添加类名,则可能不适用该插件

Note:如果没有extract-text-webpack-plugin,可能会报错

npm i -D purifycss-webpack prufi-css

new PurifyCSSPlugin({
paths:glob.sync(path.join(__dirname,'src/*.html'))
})

webpack 3.x plugins的更多相关文章

  1. webpack学习之—— Plugins

    Plugins are the backbone of webpack! webpack 自身也是构建于你在 webpack 配置中用到的相同的插件系统之上! 插件目的在于解决 loader 无法实现 ...

  2. https://webpack.js.org/plugins/

    有问题还是看源码 ,看官方文档吧,整一晚上终于整明白了

  3. webpack——entry,output,plugins,loader,chunk知识

    entry:打包入口 代码的入口,找到依赖模块 打包的入口,webpack去哪个文件找依赖,或是去那个文件依赖的依赖 可以是一个或者多个入口 例如: 1.module.exports={ entry: ...

  4. webpack学习总结

    前言 在还未接触webpack,就有几个疑问: 1. webpack本质上是什么? 2. 跟异步模块加载有关系吗? 3. 可否生成多个文件,一定是一个? 4. 被引用的文件有其他异步加载模块怎么办? ...

  5. webpack -p压缩打包react报语法错误处理

    前言:在用webpack打包react代码的时候发现一个问题,做一个处理总结. 我的webpack配置: var webpack = require('webpack'); //打包less插件 va ...

  6. 转:Webpack 指南(整理 草稿)

    基础 安装 首先要安装 Node.js, Node.js 自带了软件包管理器 npm.用 npm 全局安装 Webpack: $ npm install webpack -g 通常我们会将 Webpa ...

  7. webpack入门和实战(一):webpack配置及技巧

    一.全面理解webpack 1.什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都 ...

  8. webpack构建具备版本管理能力的项目

    webpack是时下十分流行的编译和打包工具,它提供一种可扩展的loader的方式,简单的配置,便可以编译打包各类型的文件,包括js.css.image.font.html,以及各种预编译语言都不在话 ...

  9. webpack入门必知必会

    关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 这是我第一篇介绍webpack的文章,先从一个入门教程开始吧,后续会有更多相关webpack的文章推 ...

随机推荐

  1. 开源用户界面和布局的套件XiaoCai.WinformUI(美化用户界面利器)

    发布一款开源用户界面和布局的套件,请朋友们多提提宝贵建议! XiaoCai.WinformUI主要是解决用户界面和布局的套件,能够快速进行合理性布局,美化用户界面. 因为之前发布到谷歌里,好多朋友都说 ...

  2. ftrace

    下面是一些关于ftrace的博文: ftrace 简介(IBM) 使用 ftrace 调试 Linux 内核 第 1 部分 第 2 部分 第 3 部分 Android系统性能调优工具介绍

  3. 我们知道写入过程比ZooKeeper集合中的读取过程要贵,因为所有节点都需要在数据库中写入相同的数据。因此,对于平衡的环境拥有较少数量(例如3,5,7)的节点比拥有大量的节点要好。

    我们知道写入过程比ZooKeeper集合中的读取过程要贵,因为所有节点都需要在数据库中写入相同的数据.因此,对于平衡的环境拥有较少数量(例如3,5,7)的节点比拥有大量的节点要好. 组件 描述 写入( ...

  4. renderdoc on android

    国内没人发这种贴...一个发了renderdoc with unity是在pc平台跑的 没有挂android 这货有点坑啊 花了好几个小时 wiki上的issue基本全看了...感觉是版本提交的log ...

  5. Java笔记5:单例模式

    一.应用杨景 在计算机系统中,线程池.缓存.日志对象.对话框.打印机.显卡的驱动程序对象常被设计成单例.这些应用都或多或少具有资源管理器的功能.每台计算机可以有若干个打印机,但只能有一个Printer ...

  6. 数据挖掘算法之关联规则挖掘(二)FPGrowth算法

    之前介绍的apriori算法中因为存在许多的缺陷,例如进行大量的全表扫描和计算量巨大的自然连接,所以现在几乎已经不再使用 在mahout的算法库中使用的是PFP算法,该算法是FPGrowth算法的分布 ...

  7. odoo8.0条形码改为js方式处理

    群里网友@上海-gavin 提供的odoo条形码处理,将原来的图片生成方式改为js处理方式. <div class="row text-center"> <div ...

  8. 关于窗体跟随与 PointToScreen

    今日写一段测试代码,实现的功能是,当一个输入框获得焦点时,某个帮助窗体跟随在其下方显示.代码很简单,本来没有什么值得一提的.但实验的时候发现,有些控件能较好地跟随,但有些不能,而且距离十分远. 主要代 ...

  9. Qt学习 之 多线程程序设计

    QT通过三种形式提供了对线程的支持.它们各自是, 一.平台无关的线程类 二.线程安全的事件投递 三.跨线程的信号-槽连接. 这使得开发轻巧的多线程Qt程序更为easy,并能充分利用多处理器机器的优势. ...

  10. 【DB2】SQL0501N FETCH 语句或 CLOSE 语句中指定的游标尚未打开,或者游标标量函数引用中的游标变量尚未打开。 SQLSTATE=24501

    在DB2中建立存储过程时使用了隐式游标,在调用的时候报错如下: SQL0501N  FETCH 语句或 CLOSE 语句中指定的游标尚未打开,或者游标标量函数引用中的游标变量尚未打开.  SQLSTA ...