webpack-starter

A starting point for webpack with TypeScript + SASS/SCSS + EJS

Usage

Run init.sh to add/update all dependencies.

Running

When developing, run the start script.

yarn start

or for npm:

npm run start

To build for production, run the build script.

yarn build

or for npm

npm run build

Configuration

Webpack Configuration

The webpack config is split up into three files:

• webpack.common.js: Common configuration between development and producrion builds.
• webpack.dev.js: Development specific configuration; gets called when running the start and watch scripts.
• webpack.prod.js: Production specific conficonfiguration; gets called when running build.

Templating Engine

By default (if you don't specify any loader in any way) a fallback ejs loader from html-webpack-plugin kicks in and loads the src/index.html file. Please note that this loader does not support the full ejs syntax as it is based on lodash template.

You can specify a loader via htmlWebpackOptions.js. For example, to use handlebars-loader:

/** @type {import("html-webpack-plugin").Options} */
const options = {
  template: "!!handlebars-loader!src/index.html",
  title: "Webpack Starter",
};
module.exports = options;

Note that you need to install handlebars and handlebars-loader via

yarn add -D handlebars handlebars-loader

For more customization you can look into the declaration of HtmlWebpackPlugin.Options