使用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 相关文章推荐
javascript 密码强弱度检测万能插件
Feb 25 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
jQuery判断元素上是否绑定了指定事件的方法
Mar 17 Javascript
javascript获取select标签选中的值
Jun 04 Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
js+html制作简单验证码
Feb 16 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
js操作table中tr的顺序实现上移下移一行的效果
Nov 22 Javascript
微信小程序进入广告实现代码实例
Sep 19 Javascript
node.js使用fs读取文件出错的解决方案
Oct 23 Javascript
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
页面内锚点定位及跳转方法总结(推荐)
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
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
php如何调用webservice应用介绍
2012/11/24 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
php生成图片验证码
2015/06/09 PHP
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
jQuery 工具函数学习资料
2010/04/29 Javascript
js读取本地excel文档数据的代码
2010/11/11 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
2015/02/17 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
深入理解JQuery中的事件与动画
2016/05/18 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
JS实现购物车特效
2017/02/02 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
Python爬虫工程师面试问题总结
2018/03/22 Python
解决python3中解压zip文件是文件名乱码的问题
2018/03/22 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
详解有关PyCharm安装库失败的问题的解决方法
2020/02/02 Python
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
巴西24小时在线药房:Drogasil
2020/06/20 全球购物
文员岗位职责
2013/11/09 职场文书
计算机应用职专应届生求职信
2013/11/12 职场文书
先进集体获奖感言
2014/02/13 职场文书
大学生在校学习的自我评价
2014/02/18 职场文书
模特职业生涯规划范文
2014/02/26 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python