base.webpack.js

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            'plugins': [
              ['@babel/plugin-proposal-decorators', {'legacy': true}],
              ['@babel/plugin-transform-arrow-functions', {'legacy': true}]
            ]
          }
        }
      },
      {
        test: /\.sass$/i,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ]
      },
    ]
  },
  resolve: {
    extensions: ['*', '.js']
  },
  stats: {
    colors: true
  },
  devtool: 'inline-source-map',
}

build.webpack.js

const baseWebpack = require('./base.webpack')
const path = require('path')

module.exports = {
  ...baseWebpack,
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
}

development.webpack.js

const buildWebpack = require('./build.webpack')

module.exports = {
  ...buildWebpack,
  devServer: {
    port: 2309
  }
}

karma.conf

const { createDefaultConfig } = require('@open-wc/testing-karma')
const merge = require('deepmerge')

module.exports = config => {
  config.set(
    merge(createDefaultConfig(config), {
      files: [
        // runs all files ending with .test in the test folder,
        // can be overwritten by passing a --grep flag. examples:
        //
        // npm run test -- --grep test/foo/bar.test.js
        // npm run test -- --grep test/bar/*
        { pattern: config.grep ? config.grep : './test/**/*.test.js', type: 'module' },
      ],
      esm: {
        nodeResolve: true,
      },
    }),
  );
  return config
}

package.json

{
  "scripts": {
    "serve": "webpack-dev-server --config development.webpack.js",
    "lint": "eslint src/**/*.js test/**/*.js"
  }
}