1

.首先在webpack.config.js中引入

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

2.然后在plugins配置里

plugins:[
new uglify()
]

3.在终端输入webpack,你会发现JS代码已经被压缩了,如果你用的是VSCode,可以按住Alt+Z代码自动换行,查看效果

4.上图

前端必学内容:webpack(模块打包器

webpack3 学习内容,点击即可到达

(1).webpack快速入门——如何安装webpack及注意事项

(2).webpack快速入门——webpack3.X 快速上手一个Demo

(3).webpack快速入门——配置文件:入口和出口,多入口、多出口配置

(4).webpack快速入门——配置文件:服务和热更新

(5).webpack快速入门——CSS文件打包

(6).webpack快速入门——配置JS压缩,打包

(7).webpack快速入门——插件配置:HTML文件的发布

(8).webpack快速入门——CSS中的图片处理

(9).webpack快速入门——CSS分离与图片路径处理

(10).webpack快速入门——处理HTML中的图片

(11).webpack快速入门——CSS进阶,Less文件的打包和分离

(12).webpack快速入门——CSS进阶:SASS文件的打包和分离

(13).webpack快速入门——CSS进阶:自动处理CSS3前缀

(14).webpack快速入门——CSS进阶:消除未使用的CSS

(15).webpack快速入门——给webpack增加babel支持

(16).webpack快速入门——打包后如何调试

(17).webpack快速入门——实战技巧:开发和生产并行设置

(18).webpack快速入门——实战技巧:webpack模块化配置

(19).webpack快速入门——实战技巧:优雅打包第三方类库

(20).webpack快速入门——实战技巧:watch的正确使用方法,webpack自动打包

(21).webpack快速入门——实战技巧:webpack优化黑技能

(22).webpack快速入门——集中拷贝静态资源

(23).webpack快速入门——Json配置文件使用

如果我的内容对你有帮助,欢迎打赏

webpack快速入门——配置JS压缩,打包的更多相关文章

  1. webpack快速入门——实战技巧:watch的正确使用方法,webpack自动打包

    随着项目大了,后端与前端联调,我们不需要每一次都去打包,这样特别麻烦,我们希望的场景是,每次按保存键,webpack自动为我们打包,这个工具就是watch! 因为watch是webpack自带的插件, ...

  2. webpack快速入门——配置文件:入口和出口,多入口、多出口配置

    1.在根目录新建一个webpack.config.js文件,然后开始配置: const path = require('path'); module.exports={ //入口文件的配置项 entr ...

  3. webpack快速入门——CSS文件打包

    1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ background:pink; color:yellowgreen; } 2.css建立好后,需要引 ...

  4. webpack快速入门——插件配置:HTML文件的发布

    1.把dist中的index.html复制到src目录中,并去掉我们引入的js 2.在webpack.config.js中引入 const htmlPlugin = require('html-web ...

  5. webpack快速入门——CSS进阶,Less文件的打包和分离

    1.要使用less,首先使用npm安装less服务 cnpm install less --save-dev 还需要安装Less-loader用来打包使用. cnpm install less-loa ...

  6. webpack快速入门——CSS进阶:SASS文件的打包和分离

    1.安裝:因为sass-loader依赖于node-sass,所以需要先安装node-sass cnpm install node-sass --save-dev cnpm install sass- ...

  7. webpack快速入门——打包后如何调试

    在配置devtool时,webpack给我们提供了四种选项. source-map:在一个单独文件中产生一个完整且功能完全的文件.这个文件具有最好的source map,但是它会减慢打包速度: che ...

  8. webpack快速入门——实战技巧:webpack模块化配置

    首先在根目录,新建一个webpack_config文件夹,然后新建entry_webpack.js文件,代码如下: const entry ={}; //声明entry变量 entry.path={ ...

  9. webpack快速入门——实战技巧:优雅打包第三方类库

    下面说两种方法: 一. 1.引入jQuery,首先安装: cnpm install --save jquery 2.安装好后,在我们的entry.js中引入: import $ from 'jquer ...

随机推荐

  1. Nginx详解(正向代理、反向代理、负载均衡原理)

    Nginx配置详解 nginx概述 nginx是一款自由的.开源的.高性能的HTTP服务器和反向代理服务器:同时也是一个IMAP.POP3.SMTP代理服务器:nginx可以作为一个HTTP服务器进行 ...

  2. 获取GUID的GET网址:createguid.com

    1.在浏览器的地址栏中输入createguid.com,回车之后即可得到一个GUID 2.在JMeter中可以这样填写HTTP Request 然后通过正则表达式提取器提取GUID <texta ...

  3. 启动 nexus, major.minor 51.0 版本不支持

    a).Nexus的2.6版本及其以后版本 使用的Java的jdk7. b).Nexus的2.0-2.5版本 使用Java的jdk6的update30版本及其以后的jdk6版本 使用Java的jdk7的 ...

  4. myeclipse 中 svn 更新 提交 同步资源库 详细解释下他们的功能

    原理是这样的 svn服务器一般放在公共的服务器上,大家连这个服务器,在MyEclipse上使用svn控件 可以下载svn上的项目至本地,所以很多公司将开发要用到的软件都放在svn上,有同事来只要连上s ...

  5. 2018.09.08 bzoj1531: [POI2005]Bank notes(二进制拆分优化背包)

    传送门 显然不能直接写多重背包. 这题可以用二进制拆分/单调队列优化(感觉二进制好写). 所谓二进制优化,就是把1~c[i]拆分成20,21,...2t,c[i]−2t+1+1" role= ...

  6. 2018.08.20 loj#115. 无源汇有上下界可行流(模板)

    传送门 又get到一个新技能,好兴奋的说啊. 一道无源汇有上下界可行流的模板题. 其实这东西也不难,就是将下界变形而已. 准确来说,就是对于每个点,我们算出会从它那里强制流入与流出的流量,然后与超级源 ...

  7. 状态机中的RAM注意的问题--减少扇出的办法

    可能我不会抓紧时间,所以做事老是很慢.最近在整维特比译码过程深感自己有这样的毛病. 每天会有一点进展,但是却是一天的时间,感觉别人都做起事情来很快.可能这个东西有点难,做 不做得出来都不要紧,但我的想 ...

  8. 快速掌握Java中Lambda表达式的用法

    Lambda表达式的作用: Lambda表达式的作用就是简化代码开发,让代码看起来更加简介.它是用来简化匿名内部类的.但是并不是所有的匿名内部类都能用Lambda表达式简化,Lambda表达式是有使用 ...

  9. Java内存模型(一)

    主存储器和工作存储器 Java虚拟机在执行Java程序的过程中会把它管理的内存划分为若干个不同的数据区域,这些区域包括方法区,堆,虚拟机栈,本地方法栈,程序计数器.方法区存储类信息,常量,字节码等数据 ...

  10. 团队博客-第三周:需求改进&系统设计(科利尔拉弗队)

    针对课堂讨论环节老师和其他组的问题及建议,对修改选题及需求进行修改 需求规格说明书: 1.打开网页,弹出询问时候创建账号.是:分配数字组成账号,用户填写密码,确定登录进入首页:否,用已有账号登录(传参 ...