使用webpack4編譯并壓縮ES6代碼的方法示例
前段時(shí)間第一次接觸了layabox游戲引擎做了一個(gè)項(xiàng)目，由于ES6相當(dāng)好用，所以在項(xiàng)目中使用了很多的ES6語法，但是在發(fā)布的時(shí)候發(fā)現(xiàn)該引擎無法壓縮ES6的代碼，而不進(jìn)行壓縮的話則代碼體積比較大
然后其實(shí)該引擎會(huì)將自己寫的代碼打包在一個(gè)js文件中，所以也就只有一個(gè)js文件是沒有壓縮的，所以我就想到了自己使用webpack單獨(dú)對(duì)這個(gè)文件進(jìn)行壓縮，并將ES6語法編譯成ES5，做低版本瀏覽器的兼容。
第一步安裝webpack
1） 全局安裝webpack4
npm install webpack -g
創(chuàng)建一個(gè)文件夾（webpack4-babel-uglify），初始化項(xiàng)目
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
在根目錄下創(chuàng)建src目錄，將需要編譯壓縮的js放在src目錄下
mkdir src
配置webpack.config.js
module.exports = {
mode:'development',
entry: {
app: [
"babel-polyfill",
"./src/index.js" //需要壓縮的js，目前只支持單個(gè)文件一個(gè)一個(gè)壓縮 = =！
],
},
output: {
path: path.resolve(__dirname, 'dist'), //輸出目錄
filename: 'index.js' //輸出文件名稱，建議與源文件同名
},
module: {
rules: [{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader"
}
}]
}
};
在根目錄下新建.babel文件，設(shè)置babel相關(guān)配置
{
"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下，并修改第五步中的文件名，之后執(zhí)行打包命令
npm run build
至此，壓縮編譯成功，壓縮編譯后的文件在dist目錄下
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實(shí)現(xiàn)的數(shù)字與字符串轉(zhuǎn)換功能示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的數(shù)字與字符串轉(zhuǎn)換功能,涉及javascript數(shù)字、字符串等運(yùn)算與轉(zhuǎn)換相關(guān)操作技巧,需要的朋友可以參考下2017-08-08![javascript getBoundingClientRect() 來獲取頁面元素的位置的代碼[修正版]](http://img.jbzj.com/images/xgimg/bcimg1.png)
javascript getBoundingClientRect() 來獲取頁面元素的位置的代碼[修正版]
該方法已經(jīng)不再是IE Only了，F(xiàn)F3.0+和Opera9.5+已經(jīng)支持了該方法，可以說在獲得頁面元素位置上效率能有很大的提高，在以前版本的Opera和Firefox中必須通過循環(huán)來獲得元素在頁面中的絕對(duì)位置。2009-05-05
JS循環(huán)中正確使用async、await的姿勢(shì)分享
async?/?await是ES7的重要特性之一,也是目前社區(qū)里公認(rèn)的優(yōu)秀異步解決方案,下面這篇文章主要給大家介紹了關(guān)于JS循環(huán)中正確使用async、await的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-12-12
這篇文章主要為大家詳細(xì)介紹了ajax分頁效果的實(shí)現(xiàn)方法，結(jié)合bootstrap模態(tài)框使用 ，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
JS使用數(shù)組實(shí)現(xiàn)的隊(duì)列功能示例
這篇文章主要介紹了JS使用數(shù)組實(shí)現(xiàn)的隊(duì)列功能,結(jié)合實(shí)例形式分析了javascript基于數(shù)組的隊(duì)列定義、元素添加、讀取等相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
通過sails和阿里大于實(shí)現(xiàn)短信驗(yàn)證
本篇文章主要介紹了通過sails和阿里大于實(shí)現(xiàn)短信驗(yàn)證的方法。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
鼠標(biāo)經(jīng)過顯示二級(jí)菜單js特效
本文章來給大家推薦一個(gè)不錯(cuò)的鼠標(biāo)經(jīng)過顯示二級(jí)菜單js特效效果，有需要了解的朋友可以參考一下2013-08-08
這篇文章主要為大家詳細(xì)介紹了JSP基于Bootstrap分頁顯示實(shí)例,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
本文給大家總結(jié)了三種移動(dòng)適配方案，具體哪三種感興趣的朋友可以通過本文詳細(xì)學(xué)習(xí)下2016-11-11
js一般方法改寫成面向?qū)ο蠓椒ǖ臒o限級(jí)折疊菜單示例代碼
本例是應(yīng)用別人的例子，原來那位老兄是用一般方法寫成的無限級(jí)折疊菜單，通過了一些簡(jiǎn)化修改，將原來的例子改成了面向?qū)ο蟮姆绞?/div> 2013-07-07最新評(píng)論