I've been trying to serve a single js file to be used as a script with webpack-dev-server, to be built from ts files. I'm getting 404 when I try to load the file when trying to get it from its url.

Here are my files:

webpack.common.js

const path = require('path');

const { version } = require('./package.json');

const outputPath = path.resolve(__dirname, 'dist');
const buildEnvironment = process.env.BUILD_ENVIRONMENT;
const isLocal = buildEnvironment === 'local';

/** Shared variables cross all Webpack configurations */
const shared = {
  devtool: 'inline-source-map',
  outputPath,
};

const commonWebpack = {
  entry: './src/index.ts',
  output: {
    filename: `main.v${version.replace(/\./g, '_')}.js`,
    path: outputPath,
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: [
          {
            loader: 'babel-loader',
          },
          {
            loader: 'awesome-typescript-loader',
            options: {
              // in local dev don't throw typing errors as warnings, else it causes an overlay
              // to throw up over the main application, raise them as warnings.
              errorsAsWarnings: isLocal,
              useCache: isLocal,
            },
          },
        ],
        exclude: '/node_modules/',
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js', '.mjs'],
  },
};

module.exports = {
  commonWebpack,
  shared,
};

webpack.local.js

/* eslint-disable no-console */
/* Webpack build for local development */

const merge = require('webpack-merge');
const { CheckerPlugin } = require('awesome-typescript-loader');

const { commonWebpack, shared } = require('./webpack.common.js');

const buildEnvironment = process.env.BUILD_ENVIRONMENT || 'local';
const webpackBuildMode = 'development';

console.log(
  `Build Environment:${buildEnvironment}. Webpack Build Mode:${webpackBuildMode}`,
);

module.exports = merge(commonWebpack, {
  mode: webpackBuildMode,
  devtool: shared.devtool,
  devServer: {
    contentBase: shared.outputPath,
    historyApiFallback: true,
    compress: true,
    hot: true,
    port: 4040,
    clientLogLevel: 'trace',
  },
  plugins: [
    new CheckerPlugin(),
  ],
});

src/index.ts

import { task } from "./task";

(() => {
  task()
})()

How can I serve that file as a js file?