Webpack+Serverless解决node_modules太大的问题

背景

想做一个手机浏览器插件，双击收藏好看的图片。用serverless做后端，leancloud做数据库。在部署serverless时发现，默认是要上传node_modules的，那也太夸张了吧。我随便装几个依赖，就70M了，这不行。于是想到了用webpack打包来实现，说干就干。

主要坑

target

target需要设置为node，小坑

libraryTarget

开始没设置这个属性，然后打包部署之后，请求接口一直提示超时

{"errorCode":-1,"errorMessage":"Invoking task timed out after 10 seconds","requestId":"ddaa2df566de8e2540272e360b06329c","statusCode":433}

然后提交工单，也没啥用，还让我把node_modules全部传上去，那也太大了，不可能滴。

然后开始去webpack官网看配置，最后找到了他

libraryTarget: 'commonjs2'

原因：之前的打包方式没有module.exports=__webpack_exports__这句，导致serverless那边无法调用服务，改成commonjs2就有了

开始

安装webpack依赖

"webpack": "^5.11.1",
"webpack-cli": "^4.2.0"

配置webpack.config.js

const path = require('path');

module.exports = {
  entry: './app.js', // 单入口
  mode: "production",
  output: {
    filename: 'pro.js',
    path: path.resolve(__dirname,'dist'),
    libraryTarget: 'commonjs2', // 这是最关键的，后面讲他的坑
  },
  target: 'node' // 这是最关键的
};

增加启动脚本

"scripts": {
    "start": "node ./bin/www",
    "build": "webpack --progress",
    "deploy": "npm run build && sls deploy"
  },

打包之后，只有1.3M， 部署之后，正常运行，完美