使用webpack4编译并压缩ES6代码的方法示例


Posted in Javascript onApril 24, 2019

前段时间第一次接触了layabox游戏引擎做了一个项目,由于ES6相当好用,所以在项目中使用了很多的ES6语法,但是在发布的时候发现该引擎无法压缩ES6的代码,而不进行压缩的话则代码体积比较大

然后其实该引擎会将自己写的代码打包在一个js文件中,所以也就只有一个js文件是没有压缩的,所以我就想到了自己使用webpack单独对这个文件进行压缩,并将ES6语法编译成ES5,做低版本浏览器的兼容。

第一步安装webpack

1) 全局安装webpack4

npm install webpack -g

创建一个文件夹(webpack4-babel-uglify),初始化项目

cd webpack4-babel-uglify
npm init -y
npm install webpack webpack-cli --save-dev

安装编译ES6的依赖插件

npm install babel-core babel-loader@7 babel-plugin-transform-runtime babel-preset-env --save-dev
npm install babel-polyfill babel-runtime --save

在根目录下创建src目录,将需要编译压缩的js放在src目录下

mkdir src

配置webpack.config.js

module.exports = {
 mode:'development',
 entry: {
 app: [
  "babel-polyfill", 
  "./src/index.js" //需要压缩的js,目前只支持单个文件一个一个压缩 = =!
 ],
 },
 output: {
 path: path.resolve(__dirname, 'dist'), //输出目录
 filename: 'index.js' //输出文件名称,建议与源文件同名
 },
 module: {
 rules: [{
  test: /\.js$/,
  exclude: /(node_modules)/,
  use: {
  loader: "babel-loader"
  }
 }]
 }
};

在根目录下新建.babel文件,设置babel相关配置

{
 "presets": [
 [
  "env",
  {
  "targets": {
   "browsers": [ //浏览器版本
   "> 1%",
   "last 2 versions",
   "not ie <= 8",
   "iOS >= 6",
   "safari >= 6",
   "Firefox >= 20",
   "Android > 4",
   "android >= 4.4"
   ]
  }
  }
 ]
 ],
 "plugins": ["transform-runtime"]
}

修改package.json中的打包命令

"scripts": {
  ...
 "build": "webpack" //新增这条命令
 }

将需要压缩编译的js文件放入src下,并修改第五步中的文件名,之后执行打包命令

npm run build

至此,压缩编译成功,压缩编译后的文件在dist目录下

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
Mar 10 Javascript
javascript实现动态侧边栏代码
Feb 19 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
May 08 Javascript
jquery常用操作小结
Jul 21 Javascript
详解Javascript中prototype属性(推荐)
Sep 03 Javascript
JS实现的简单轮播图运动效果示例
Dec 22 Javascript
JavaScript中数组Array.sort()排序方法详解
Mar 01 Javascript
js定时器+简单的动画效果实例
Nov 10 Javascript
vue路由守卫,限制前端页面访问权限的例子
Nov 11 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 Javascript
关于ES6尾调用优化的使用
Sep 11 Javascript
页面内锚点定位及跳转方法总结(推荐)
Apr 24 #Javascript
详解Vue项目中实现锚点定位
Apr 24 #Javascript
微信小程序中使用echarts的实现方法
Apr 24 #Javascript
基于mpvue小程序使用echarts画折线图的方法示例
Apr 24 #Javascript
详解微信小程序开发用户授权登陆
Apr 24 #Javascript
微信小程序实现的一键拨号功能示例
Apr 24 #Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 #Javascript
You might like
解决ajax+php中文乱码的方法详解
2013/06/09 PHP
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
详解JavaScript中的异常处理方法
2015/06/16 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
nodejs搭建本地服务器并访问文件的方法
2017/03/03 NodeJs
Angular开发者指南之入门介绍
2017/03/05 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
vue中 v-for循环的用法详解
2020/02/19 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
python实现查询苹果手机维修进度
2015/03/16 Python
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
pandas 选择某几列的方法
2018/07/03 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
技校毕业生的自我评价
2013/12/27 职场文书
支教自我鉴定
2014/01/18 职场文书
村官工作鉴定评语
2014/01/27 职场文书
一月红领巾广播稿
2014/02/11 职场文书
联欢晚会主持词
2014/03/25 职场文书
房地产项目合作意向书
2015/05/08 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
2016年百日安全生产活动总结
2016/04/06 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
详解Python类和对象内容
2021/06/22 Python
中国古风插画师排行榜:夏达第一,第三是阴阳师姑获鸟皮肤创作者
2022/03/18 国漫
Python列表的索引与切片
2022/04/07 Python