如何使用webpack4编译并压缩ES6代码

这篇文章将为大家详细讲解有关如何使用webpack4编译并压缩ES6代码,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

成都创新互联是专业的中站网站建设公司,中站接单;提供成都网站制作、成都网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行中站网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

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

关于“如何使用webpack4编译并压缩ES6代码”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


网站标题:如何使用webpack4编译并压缩ES6代码
本文链接:http://bzwzjz.com/article/poiijd.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都网站建设 重庆网站制作 自适应网站设计 成都网站建设 网站建设 定制网站建设多少钱 成都网站建设 成都响应式网站建设 高端网站设计 成都网站设计制作公司 营销网站建设 成都定制网站建设 成都网站设计 外贸营销网站建设 H5网站制作 企业网站设计 广安网站设计 移动网站建设 成都网站建设 阿坝网站设计 响应式网站设计 成都商城网站建设