前段時間第一次接觸了layabox游戲引擎做了一個項目，由于ES6相當好用，所以在項目中使用了很多的ES6語法，但是在發布的時候發現該引擎無法壓縮ES6的代碼，而不進行壓縮的話則代碼體積比較大
然后其實該引擎會將自己寫的代碼打包在一個js文件中，所以也就只有一個js文件是沒有壓縮的，所以我就想到了自己使用webpack單獨對這個文件進行壓縮，并將ES6語法編譯成ES5，做低版本瀏覽器的兼容。
第一步安裝webpack
1） 全局安裝webpack4
npm install webpack -g
創建一個文件夾（webpack4-babel-uglify），初始化項目
cd webpack4-babel-uglifynpm init -ynpm install webpack webpack-cli --save-dev
安裝編譯ES6的依賴插件
npm install babel-core babel-loader@7 babel-plugin-transform-runtime babel-preset-env --save-devnpm 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目錄下
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
