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

前段时间第一次接触了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目录下

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用webpack编译es6代码的方法步骤

    前言 团队使用的 webpack 功能很强大,有时候会碰到编译失败的情况,总得找工具的作者解决问题,自己很少去追究原因,感觉对于 webpack 的认知总是一知半解.因此,从本篇文章开始,自己从零开始配置 webpack,认真体验一下配置过程.文章内容过于简单,如果有 webpack 使用经验的人,就不用往下看啦. 版本说明 本文使用的 webpack 的版本为:4.30.0 开始搭建 本文的目的是使用 webpack 完成 es6 的编译,没想到过程过于简单. 安装 node 与 npm 镜像

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

    前段时间第一次接触了layabox游戏引擎做了一个项目,由于ES6相当好用,所以在项目中使用了很多的ES6语法,但是在发布的时候发现该引擎无法压缩ES6的代码,而不进行压缩的话则代码体积比较大 然后其实该引擎会将自己写的代码打包在一个js文件中,所以也就只有一个js文件是没有压缩的,所以我就想到了自己使用webpack单独对这个文件进行压缩,并将ES6语法编译成ES5,做低版本浏览器的兼容. 第一步安装webpack 1) 全局安装webpack4 npm install webpack -g

  • Webpack4 使用Babel处理ES6语法的方法示例

    修改 index.js 内容,写一些 ES6 的语法: const arr = [ new Promise(() => {}), new Promise(() => {}) ]; arr.map(item => { console.log(item); }) ES6 很强大,但目前并不是所有的浏览器都支持,所以需要用到 Babel,让旧的浏览器或环境中将 ES6 代码转换为向后兼容版本的 JavaScript 代码. 来试一下吧,先安装需要用的 Babel 包: npm install

  • C#实现压缩HTML代码的方法

    本文实例讲述了C#实现压缩html代码的方法,分享给大家供大家参考之用.具体方法如下: 主要代码如下: /// <summary> /// 压缩html代码 /// </summary> /// <param name="writer"></param> protected override void Render(HtmlTextWriter writer) { System.IO.StringWriter html = new Sys

  • PHP递归遍历文件夹去除注释并压缩php源代码的方法示例

    本文实例讲述了PHP递归遍历文件夹去除注释并压缩代码的方法.分享给大家供大家参考,具体如下: <?php // ===================文件夹 递归 去除PHP注释并压缩========================= header("content-type:text/html;charset=utf-8"); $dir = "D:\sound\admin--"; // 需要转换的文件路径. $fdir = "D:\sound\ad

  • 在vue.js中抽出公共代码的方法示例

    在vue.js中抽出公共代码的方法示例

    前言 当我们在使用vue构建中大型项目时,通常会遇到某些经常用的方法以及属性,比如说搭建一个员工管理系统,请求的url需要一个共同的前缀,或者在某几个view中需要用到时间,这个时间是通过某方法格式化之后的等等,如果每次用到都写共同的代码,那样如果之后有变动的话维护起来会非常麻烦. 所以我们就得想办法抽出公共代码,因为vue是组件化开发,我们就会很自然的与es6的module模块化联系到一起.其实当我们在搭建项目结构时就应该先提前埋下伏笔,有一个util文件夹,里面放的就是我们要写的公共代码,其

  • C语言代码中调用C++代码的方法示例

    由于历史原因,以及不同开发人员的技术偏好,C语言和C++语言都有一些独有的非常有价值的项目,因而两种语言的互操作,充分利用前人造的轮子是一件非常有价值的事情. C++代码调用C代码很简单,只要分别在包含的C头文件的开头和结尾加上如下的两个块: #ifdef __cplusplus extern "C" { #endif 和 #ifdef __cplusplus } #endif 即可. 然而为了支持类.重载等更加高级的特性,在编译C++代码时,C++符号会被修饰.我们dump Linu

  • 在javascript中执行任意html代码的方法示例解读

    今天码代码中偶然发现有一种情况javascript的eval()函数无法执行html代码,比如: 复制代码 代码如下: <script>eval('<li>hehe</li>')</script> 代码是不会执行的,但是改为如下就可以执行了: 复制代码 代码如下: <script>eval('</script><li>hehe</li><script>')</script>

  • Spring Boot利用Lombok减少Java中样板代码的方法示例

    前言 Lombok想要解决了的是在我们实体Bean中大量的Getter/Setter方法,以及toString, hashCode等可能不会用到,但是某些时候仍然需要复写,以期方便使用的方法:在使用Lombok之后,将由其来自动帮你实现代码生成,注意,其是在运行过程中,帮你自动生成的.就是说,将极大减少你的代码总量. Lombok的官方地址: https://projectlombok.org/ 其实说实话第一次听到Lombok的时候,是从一个带我的匈牙利老师傅那里学来的.那个时候他给了我一套J

  • Flutter调用Android和iOS原生代码的方法示例

    前言 本文主要给大家介绍了关于Flutter调用Android和iOS原生代码的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 分3个大步骤: 1.在flutter中调用原生方法 2.在Android中实现被调用的方法 3.在iOS中实现被调用的方法 在flutter中调用原生方法 场景,这里你希望调用原生方法告诉你一个bool值,这个值的意义你可以随意定,这里表示的意义是是否是中国用户. 你可以在flutter中设计好要调用的方法名称,这里就叫 isChinese 请

随机推荐