使用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 相关文章推荐
Save a File Using a File Save Dialog Box
Jun 18 Javascript
javascript下判断一个元素是否存在的代码
Mar 05 Javascript
JQuery防止退格键网页后退的实现代码
Mar 23 Javascript
Bootstrap入门书籍之(一)排版
Feb 17 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 Javascript
vue.js+element-ui动态配置菜单的实例
Sep 07 Javascript
javascript json字符串到json对象转义问题
Jan 22 Javascript
详解如何使用微信小程序云函数发送短信验证码
Mar 13 Javascript
create-react-app中添加less支持的实现
Nov 15 Javascript
用Angular实现一个扫雷的游戏示例
May 15 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
php在线打包程序源码
2008/07/27 PHP
php 进度条实现代码
2009/03/10 PHP
11个PHP 分页脚本推荐
2011/08/15 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
js同时按下两个方向键
2007/12/01 Javascript
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
2010/03/08 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
js Math 对象的方法
2013/09/01 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
angular分页指令操作
2017/01/09 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
Angular2 组件交互实例详解
2017/08/24 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
浅谈redux以及react-redux简单实现
2018/08/28 Javascript
javascript实现考勤日历功能
2018/11/29 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
python中字符串的操作方法大全
2018/06/03 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
html2canvas生成的图片偏移不完整的解决方法
2020/05/19 HTML / CSS
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
离职感谢信怎么写
2015/01/22 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏
Win11软件图标固定到任务栏
2022/04/19 数码科技
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript