[BABEL+WEBPACK@4] 手動用webpack+babel 打包壓縮文件兼容ie

今天要把 bpmn-modeler.development.js 打包壓縮成ie可以是識別的代碼 es5 bpmn-modeler.min.js

剛開始用的是babel的打包，但是babel打包后不能識別promise

於是就想到了很久沒有用到的webpack ，可是webpack已經升級到4了，好多都跟之前的不一樣。於是開啟瘋狂的百度模式，下面把我遇到的問題整理一下，僅供參考，也方便以后使用；

NO1：Note: The code generator has deoptimised the styling of …… as it exceeds the max of "500KB".

解決方法：在.babelrc文件中寫入："compact": false,

{
  "compact": false, "presets": [
    [
      "@babel/preset-env",
      {
        "debug": true,
        "useBuiltIns": "usage",
        "targets":{
          "browsers":["> 1%", "last 2 versions", "not ie <= 8"]
        }
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 2
      }
    ]
  ]
}

NO2：WebPack 警告WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).解決

解決方法：在webpack.config.js里面添加如下藍色部分

 

const path=require('path');
module.exports = {
    // 生產環境
    mode: 'production',
    entry:  {
        ...
    }, // 之前提到的唯一入口文件
    output: {
        ...
    },

    // 指定loader
    module: {
        ...
    },
    performance: { hints: "warning", // 枚舉 maxAssetSize: 30000000, // 整數類型（以字節為單位） maxEntrypointSize: 50000000, // 整數類型（以字節為單位） assetFilter: function (assetFilename) { // 提供資源文件名的斷言函數 return assetFilename.endsWith('.css') || assetFilename.endsWith('.js'); } }
}

 

網上有說可以添加

performance: {
 
hints:false   
 
}

本人沒有嘗試，感興趣的小伙伴可以試試。

NO3：報錯：TypeError：Cannot read property 'bindings' of null


解決方法：重新安裝 npm install -D babel-loader @babel/core @babel/preset-env webpack  ；同時修改.babelrc文件和webpack.config.js文件

 

webpack.config.js
const path=require('path');
module.exports = {
    // 生產環境
    mode: 'production',
    entry:  {
        ...
    }, // 之前提到的唯一入口文件
    output: {
        ...
    },

    // 指定loader
    module: {

        // rules中的每一項是一個規則
        rules:[
            {
                test: /\.js$/, // 值一個正則，符合這些正則的資源會用一個loade來處理
                use: {
                    loader: 'babel-loader', // 使用bable-loader來處理
                    options: {  // 指定參數
                        presets: [
                            ['@babel/preset-env', {
                                targets: {
                                    browsers: ['> 1%', 'last 2 version'] //具體可以去babel-preset里面查看
                                }
                            }]

                        ] // 指定哪些語法編譯
                    }
                },
                exclude: '/node_module/' // 排除在外
            }
        ]
    },
    performance: {
        ...
    }
}

 

.babelrc文件
{
  "compact": false,
  "presets": [
    [
      "@babel/preset-env",
      {
        "debug": true,
        "useBuiltIns": "usage",
        "targets":{
          "browsers":["> 1%", "last 2 versions", "not ie <= 8"]
        }
      }
    ]
  ],
  "plugins": [
    ...
  ]
}

注意：這兩個文件此處的名字要一致。

NO4：Requires Babel "^7.0.0-0", but was loaded with "6.26.3".

npm install --save-dev babel-jest babel-core@^7.0.0-bridge.0 @babel/core regenerator-runtime

NO5：創建webpack打包 以及安裝依賴

npm init -y

"devDependencies": {
    "@babel/cli": "^7.10.1",
    "@babel/core": "^7.10.2",
    "@babel/plugin-transform-runtime": "^7.10.1",
    "@babel/preset-env": "^7.10.2",
    "babel-loader": "^8.1.0",
    "babel-preset-env": "^1.7.0",
    "url-loader": "^4.1.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "@babel/polyfill": "^7.10.1",
    "@babel/runtime": "^7.10.2",
    "@babel/runtime-corejs2": "^7.10.2",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^26.0.1",
    "regenerator-runtime": "^0.13.5"
  }

 

參考文獻：https://segmentfault.com/a/1190000017175671