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. JavaScript:this是什么

    JavaScript:this是什么? 定义:this是包含它的函数作为方法被调用时所属的对象. 说明:这句话有点咬嘴,但一个多余的字也没有,定义非常准确,我们可以分3部分来理解它! 1.包含它的函数 ...

  2. 在WinRT程序中使用MEF

    今天试了一下在WinRT中使用MEF,这里简单的介绍一下步骤. 首先,使用NuGet安装MEF 然后,就可以使用MEF组装插件了,简单的示例如下: interface ILogger    {     ...

  3. vs2013 编译 notepad++ 源代码

    一.官方网站下载源代码,解压后得到scintilla和powereditor文件夹. 二.安装vs2013.直接打开powereditor\visual.net\notepadplus.vcxproj ...

  4. ios 如何获得系统时间和日期

    iphone 如何获得系统时间和日期 代码如下: #import <time.h> 1.获得当前的系统时间和日期 //获得系统时间 NSDate *  senddate=[NSDate d ...

  5. Go语言的9大优势和3大缺点, GO语言最初的定位就是互联网时代的C语言, 我为什么放弃Go语言

    Go语言的9大优势和3大缺点 转用一门新语言通常是一项大决策,尤其是当你的团队成员中只有一个使用过它时.今年 Stream 团队的主要编程语言从 Python 转向了 Go.本文解释了其背后的九大原因 ...

  6. ubuntu ufw防火墙简易教程(转)

    ufw是一个主机端的iptables类防火墙配置工具,比较容易上手.一般桌面应用使用ufw已经可以满足要求了. 安装方法 sudo apt-get install ufw 当然,这是有图形界面的(比较 ...

  7. JAMon监控web工程方法的调用性能

    JAMon简介 JAMon的全名是:Java Application Monitor.它是一个小巧的,免费的,高性能的,线程安全的性能监测工具. 它可以用来测定系统的性能瓶颈,也可以用来监视用户和应用 ...

  8. 判断浏览器是否支持 JS

    在有些浏览器中不支持(或者被禁用了)脚本语言,那么javascript脚本则无法被执行.但是用户并不知道浏览器是否支持,或者被禁用.我们可以通过<noscript>标签来告知用户,JS脚运 ...

  9. [转载]深入理解java多态性

    FROM:http://blog.csdn.net/thinkGhoster/article/details/2307001 昨天看到一个关于多态性的帖子,参考了回帖者的理解,加入了一些自己的看法,整 ...

  10. Linux命令未找到(command not found),误删Linux path原始路径

    1.执行:/bin/vim /etc/profile (打开并编辑profile将Path修改正确,然后保存退出) 2.执行:export PATH=/usr/bin:/usr/sbin:/bin:/ ...