A simple webpack boilerplate with Typescripts & Sass (save time with this boilerplate 🚶‍♂️)

First install dependencies:

npm install

To create a development build:

npm run start

To create a production build:

npm run build

The base folder holds boilerplate content. It holds the styles every page of your site/project should receive.

The components folder holds all your micro layout files. Your styles for buttons and navigation and similar page components.

Your macro layout files go in the layouts folder. Styles for major sections of the layout like a header or footer and styles for a grid system would belong here.

If you have styles specific to individual pages on your site, you can place them in the pages folder. For example it’s not uncommon for the home page of your site to require page specific styles that no other page receives.

Finally the vendors folder holds 3rd party code and the main.scss file uses @import statements to include the other files.

To generate more than one HTML file, declare the plugin more than once in your plugins array

webpack.config.js

{
  plugins: [
    new HtmlWebpackPlugin({  // Also generate a demo.html
      filename: 'demo.html',
      template: 'src/html/demo.html'
    })
  ]
}