Webpack support?

[waynerobinson]

I notice that to get get source maps working it suggests that Webpack is required.

Is there any instructions on using this plugin with Webpack? Is it as simple as using the https://github.com/serverless-heaven/serverless-webpack plugin?

[tspecht]

Any news on this? Trying to get both serverless-webpack and serverless-plugin-typescript to run right now but have no luck combining it :/

[jamesdixon]

Anyone have any updates on this? I keep getting the following error when deploying:

The webpack plugin could not find the configuration file at: /Users/jamesdixon/Projects/scout/platform/functions/email-service/.build/webpack.config.ts

For some reason, it doesn't seem to copy over the webpack config.

[waynerobinson]

I've personally moved to using serverless-webpack directly with a config based off https://github.com/serverless-heaven/serverless-webpack/tree/master/examples/typescript

[jamesdixon]

@waynerobinson Im using serverless-webpack as well, but no luck. Going to try that config. Question: did you convert your webpack.config file to typescript or left it as .js?

[waynerobinson]

I'm not sure you can convert the webpack.config file to TyepScript as Webpack is the thing that ends up calling the TypeScript compiler.

[jamesdixon]

@waynerobinson got it. I tried the straight-up JS version, but for some reason still getting that error...hmm

[waynerobinson]

I would suggest taking that exact sample, getting it to work and modifying it to suit your needs.

Ultimately, when I look at any of our production TypeScript/Webpack configs these days they're not that different from a standard Webpack/Typescript config.

The key difference is the way we define the entries into the app in a Serverless way:

Here is a more generic version of one of our small production services running in Node 8.10 on Lambda using the ts-loader package.

tsconfig.json

{
  "compilerOptions": {
    "preserveConstEnums": true,
    "strictNullChecks": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "target": "es2017",
    "module": "commonjs",
    "lib": [
      "dom",
      "es2017",
      "esnext.asynciterable"
    ]
  }
}

webpack.config.js

const path = require('path');
const slsw = require('serverless-webpack');

module.exports = {
  context: __dirname,
  entry: slsw.lib.entries,
  devtool: 'source-map-support',
  resolve: {
    extensions: [
      '.js',
      '.jsx',
      '.json',
      '.ts',
      '.tsx'
    ]
  },
  output: {
    libraryTarget: 'commonjs',
    path: path.join(__dirname, '.webpack'),
    filename: '[name].js',
  },
  target: 'node',
  module: {
    rules: [
      {
        test: /\.ts(x?)$/,
        loader: 'ts-loader',
        options: {
        }
      },
    ],
  },
};

[jamesdixon]

@waynerobinson much appreciated! Any idea what version of serverless-webpack and serverless-plugin-typescript you're using?

[waynerobinson]

We don't use the serverless-plugin-typescript anymore, only serverless-webpack with that standard Webpack config to load/convert Typescript.

And all our microservices are kept as close to the latest version of all our packages as possible (the speed at which the Node community moves these through minor and major versions is the worst part about Node in my opinion).

[jamesdixon]

@waynerobinson ah, gotcha! Maybe that's the problem then -- just an issue with this plugin. My TS experience is limited, so I was hoping to be able to drop this in and just have it work, but no such luck.

Appreciate your help!

[suku-h]

Anyone have any updates on this? I keep getting the following error when deploying:

The webpack plugin could not find the configuration file at: /Users/jamesdixon/Projects/scout/platform/functions/email-service/.build/webpack.config.ts

For some reason, it doesn't seem to copy over the webpack config.

This is caused because the plugins have to be in particular order:

plugins:
  - serverless-webpack
  - serverless-plugin-typescript
  - serverless-offline

The webpack plugin should be before the serverless-plugin-typescript