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. 微软自家的.Net下的JavaScript引擎——ClearScript

    之前我介绍过一个开源的.Net下的Javascript引擎Javascript .NET,今天发现微软自己也开源了一个JavaScript引擎——ClearScript(当然,也支持VB Script ...

  2. Linux中线程的挂起与恢复(进程暂停)

    http://www.linuxidc.com/Linux/2013-09/90156.htm 今天在网上查了一下Linux中对进程的挂起与恢复的实现,相关资料少的可怜,大部分都是粘贴复制.也没有完整 ...

  3. oracle--v$lock type字段详解

    Name Description AD ASM Disk AU Lock AF Advisor Framework AG Analytic Workspace Generation AK GES De ...

  4. 英雄pk理解面向对象中的this指针概念

    class Hero { public int ATN { get; set; } public int DEF { get; set; } public int HP { get; set; } p ...

  5. js各种验证总结

    1.邮箱验证 function isEmail(str){ var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1 ...

  6. 想使用gevent、mysql、sqlalchemy实现python项目协程异步达到并发的效果

    如题,但是查看了很多资料,都说python这边的mysql不支持异步并发,只能阻塞进行,心塞30秒,暂时放弃这方面的研究 如果不操作数据库的化,比如请求url.操作文件,还是可以用gevent来异步实 ...

  7. 怎样用bat批量重命名文件夹和文件

    很早以前本人写过重命名文件夹的文章,发现其中稍有不完善的地方,其主要功能在文件夹名前统一加上字符,或者在文件夹名后统一加上字符,有网友反应功能太单一.今天我又仔细研究了一下bat批处理代码,分别能完全 ...

  8. Shell--数据流重定向

    数据流重定向就是将某个命令执行后应该要出现在屏幕上的数据传输到其他地方 标准 1.标准输入(stdin):代码为0,使用<或<< 2.标准输出(stdout):代码为1.,使用> ...

  9. [Angular] Angular Attribute Decorator - When to use it?

    When we pass value to a component, normally we use @Input. <my-comp [courses]="(courses$ | a ...

  10. 响应式设计工具网站mydevice.io

    1.网址 https://mydevice.io/ 2.使用 在mydevice.io上有常见智能手机,PC电脑的尺寸.