Skip to content

Latest commit

 

History

History
99 lines (76 loc) · 2.65 KB

File metadata and controls

99 lines (76 loc) · 2.65 KB

My Multipurpose Webpack 5 Config (TypeScript)

See https://github.com/kalaschnik/multipurpose-webpack-config for my vanialla JS config

Config Overview

  • Dev Server (npm start)
  • Top-Level await (through webpack, this requires (at least) "target": "es2017", "module": "es2022" in tsconfig.json)
  • Single Webpack Config for Dev and Production
    • Auto-switch mode to production when using npm run build
    • source-maps-enabled on dev — disabled in prod
  • static assets sit in /public and get copied to dist on build (CRA style)
  • Using HtmlWebpackPlugin with templates for multiple entry points and outputs
  • CSS in <style> tags to reduce requests
  • PostCSS support (w/ native CSS nesting enabled)
  • Markdown support using remark-html
  • Inline SVG support (using asset/source)
  • Image support (using asset/resource)

Replicate (initial setup)

Show

Note that this is only the initial setup I started with. Check out the project’s config files for the current setup!

  1. Init npm
npm init -y
  1. Install dependencies
    1. webpack core bundler
    2. webpack-cli run webpack commands
    3. webpack-dev-server liver server watching file changes
    4. typescript install specific ts version for current version
    5. ts-loader tells webpack how to convert ts to js
npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader
  1. Create project structure
mkdir src && touch src/index.ts && touch webpack.config.js && tsc --init
  1. Set your desired JS target in tsconfig.json which webpack will respect

  2. Set // "outDir": "./", to "outDir": "./dist/",

  3. Add the following to your webpack.config.js (from the docs)

const path = require('path');

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devtool: 'source-map',
};
  1. Enable source-maps (for debugging) in tsconfig.json: "sourceMap": true,

  2. Add an index.html in your root pointing to <script src="dist/bundle.js"></script>

  3. Setup scripts in package.json:

"scripts": {
    "start": "webpack serve",
    "build": "webpack"
  },