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. JAVA对字符串的压缩与解压缩

    import java.io.ByteArrayInputStream;import java.io.ByteArrayOutputStream;import java.io.IOException; ...

  2. Mybatis传值为空需要配置JdbcType来解决吗?(XML文件不需要配置JdbcType)

    1,解决思路,配置自定义的语言驱动,重写自己的Paramethander package cn.com.servyou.gxdqy.tool.xmlhelper; import org.apache. ...

  3. C# 如何操作串口

    1.首先要引用  System.IO.Ports using System; using System.Collections.Generic; using System.ComponentModel ...

  4. 2018.10.23 vijo1243生产产品(单调队列优化dp)

    传送门 这道单调队列真的有点难写啊. 方程感觉挺简单的. f[i][j]f[i][j]f[i][j]表示在第iii个车间结束前jjj次步骤的最小代价. 然后用单调队列毒瘤优化一下就行了. 代码: #i ...

  5. hdu-1728(bfs+优化)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1728 注意:1.先输入起点(y1,x1)和终点(y2,x2): 2.如果一个一个遍历会超时. 思路:每 ...

  6. RabbitMQ添加rabbitmqadmin和其使用方法(类似Redis的redis-cli)

    一:先进入rabbitmq的安装目录下的bin目录,执行wget -c http://localhost:15672/cli/rabbitmqadmin:(前提是plugin management已经 ...

  7. 新浪微博mid和url的互算

    我们在使用新浪微博API时,有时需要得到一个微博的url,但是如statuses/public_timeline等接口中取得的微博status的字段中并没有包含.不过,status中包含了一个mid字 ...

  8. shell 文本处理——使用awk格式化时间戳

    date -d @时间戳 "+%Y-%m-%d %H:%M:%S" 也可以内置函数 awk '{print strftime("%Y-%m-%d %H:%M:%S&quo ...

  9. 作为CTO如何做技术升级

    升级技术架构,先要革新观念,最后才是技术问题 升级技术架构,不仅仅是技术升级 说到升级架构,大家第一个都会想到,是不是对技术升级一下就可以了? 我认为不是,技术架构升级要求的是整个公司的升级. 技术架 ...

  10. shell 脚本 批量修改文件名

    修改文件名前 #!/bin/bask # for a in $( ls /etc/yum.repos.d/CentOS* );do if [ $a != '/etc/yum.repos.d/CentO ...