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. android textview settext卡顿深层次原因

    最近在公司项目里面发现listview里面的textview在调用settext函数的时候非常耗时,当时都有点不敢相信,这是因为如果你把textview设置成wrap_content,则每次调用set ...

  2. DB2 like两个表的字段或like一个变量

    DB2中的like的使用是有限制的,它后面不能跟一个变量或者是字段,因此,在存储过程或SQL语句中就不能like一个变量或一个字段. 比如有两个表A(a,b,c,d),B(a,b,c,d). 普遍的用 ...

  3. 小程序getUserInfo授权升级更新登录优化

    小程序基础库2.0.7更新小程序组件 <button> 新增 open-type 属性有效值 openSetting,所以说,再也不能愉快的直接调用getUserInfo了.但是不想用官方 ...

  4. spring boot2.0冷知识

    首先,Spring Boot 2.0.0 要求 Java 8 或更高版本,不再支持 Java 6 和 7. 在 Spring Boot 2.0 中,许多配置属性已被重命名或被删除,相应地,开发者需要升 ...

  5. ArcGIS Desktop python Add-in 测试一个插件

    a)制作一个插件文件 先找到工作目录,双击运行makeaddin.py脚本.这个脚本拷贝所有插件需要的文件和文件夹并在工作目录形成一个压缩文件.该压缩文件名为工作目录名称加上".esriad ...

  6. DEVEXPRESS 破解方法

    Devexpress 是.net的一个非常好用的插件.能够轻松的帮你实现一个非常炫的UI,无论是C#的Winform还是ASP.NET的网站. 鄙人这两天在用DEVEXPRESS的过程中发现在网上并未 ...

  7. 用Node完成AWS S3的Upload流程之全世界最简版

    开场: 查了两天文档,Error了38次,最后索性去掉所有附加条件, 连界面也不要了,在命令行里跑通了一坨最干瘪的Upload流程! 还冒着热气…… 在此先做记录,明天可以搭配美美的界面继续调试了. ...

  8. (网络流 模板)A Plug for UNIX -- poj -- 1087

    链接: http://poj.org/problem?id=1087 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82835#probl ...

  9. 如何更新world文档的目录

    在想要设置目录的文档页,右键 -> 更新域, 或者在想要设置目录的文档页,按下 F9 即可 拓展: 在目录文档页  ,按Ctrl 并且单击鼠标可以跟踪目标连接 如果内容对您有所帮助,请打赏--- ...

  10. vc创建模态和非模态对话框

    模态对话框的创建 创建模态对话框需要调用CDialog类的成员函数:DoModal,该函数的功能就是创建并显示一个模 态对话框,关闭模态对话框的函数是EndDialog,该函数需要一个参数,这个参数就 ...