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. Codeforces 709C 模拟

    C. Letters Cyclic Shift time limit per test:1 second memory limit per test:256 megabytes input:stand ...

  2. 【Sikuli】Sikuli 文档

    http://sikulix-2014.readthedocs.io/en/latest/index.html

  3. OSGi 系列(三)之 bundle 事件监听

    OSGi 系列(三)之 bundle 事件监听 bundle 的事件监听是在 bundle 生命周期的不同状态相互转换时,OSGi 框架会发出各种不同的事件供事先注册好的事件监听器处理. 1. 事件监 ...

  4. KBMMW 4.80.00 发布

    一大波更新来了. 4.80.00 March 30 2015 Important notes (changes that may break existing code)        ======= ...

  5. java如何实现以数据流的形式下载压缩包到本地?

    先不多说,直接贴代码吧,在服务器的E盘下放一个E:/manual.rar的压缩包 package com.cellstrain.icell.controller; import org.springf ...

  6. java实现网站paypal支付功能并且异步修改订单的状态

    java实现网站paypal支付功能并且异步修改订单的状态:步骤如下 第一步:去paypal的官网https://www.paypal.com注册一个个人账号,在创建沙箱测试账号时需要用到 第二步:p ...

  7. 2018.08.02 洛谷P3355 骑士共存问题(最小割)

    传送门 这题让我联想到一道叫做方格取数问题的题,如果想使摆的更多,就要使不能摆的更少,因此根据骑士的限制条件建图,求出至少有多少骑士不能摆,减一减就行了. 代码: #include<bits/s ...

  8. 前端学习—React—初出茅庐

    React学习—初出茅庐 对与React的学习思路,首先React中用到了Class.let.const.以及modual(模块)的导入(import)和导出(export),而这些都是ECMAScr ...

  9. hdu-1128(数学问题,筛数)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1128 思路:从0,开始,每次求一个数x的d(x),然后判断如果x没有标记,则说明x没有由任意一个d(i ...

  10. [GO]删除切片的某个值

    func removePro(ddbenv []*model.EnvInfo, k int) []*model.EnvInfo { :]...) } for k, v := range ddbenv ...