[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