boilerplate

config/paths.js

@@ -0,0 +1,12 @@
+const path = require('path')
+
+module.exports = {
+  // Source files
+  src: path.resolve(__dirname, '../src'),
+
+  // Production build files
+  build: path.resolve(__dirname, '../dist'),
+
+  // Static files that get copied to build folder
+  public: path.resolve(__dirname, '../public'),
+}

config/webpack.common.js

@@ -0,0 +1,69 @@
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+const paths = require('./paths')
+
+module.exports = {
+  // Where webpack looks to start building the bundle
+  entry: [paths.src + '/index.js'],
+
+  // Where webpack outputs the assets and bundles
+  output: {
+    path: paths.build,
+    filename: '[name].bundle.js',
+    publicPath: '/',
+  },
+
+  // Customize the webpack build process
+  plugins: [
+    // Removes/cleans build folders and unused assets when rebuilding
+    new CleanWebpackPlugin(),
+
+    // Copies files from target to destination folder
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: paths.public,
+          to: 'assets',
+          globOptions: {
+            ignore: ['*.DS_Store'],
+          },
+          noErrorOnMissing: true,
+        },
+      ],
+    }),
+
+    // Generates an HTML file from a template
+    // Generates deprecation warning: https://github.com/jantimon/html-webpack-plugin/issues/1501
+    new HtmlWebpackPlugin({
+      title: 'webpack Boilerplate',
+      favicon: paths.src + '/images/favicon.png',
+      template: paths.src + '/template.html', // template file
+      filename: 'index.html', // output file
+    }),
+  ],
+
+  // Determine how modules within the project are treated
+  module: {
+    rules: [
+      // JavaScript: Use Babel to transpile JavaScript files
+      { test: /\.js$/, use: ['babel-loader'] },
+
+      // Images: Copy image files to build folder
+      { test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource' },
+
+      // Fonts and SVGs: Inline files
+      { test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/inline' },
+    ],
+  },
+
+  resolve: {
+    modules: [paths.src, 'node_modules'],
+    extensions: ['.js', '.jsx', '.json'],
+    alias: {
+      '@': paths.src,
+      assets: paths.public,
+    },
+  },
+}

config/webpack.dev.js

@@ -0,0 +1,38 @@
+const { merge } = require('webpack-merge')
+
+const common = require('./webpack.common')
+
+module.exports = merge(common, {
+  // Set the mode to development or production
+  mode: 'development',
+
+  // Control how source maps are generated
+  devtool: 'inline-source-map',
+
+  // Spin up a server for quick development
+  devServer: {
+    historyApiFallback: true,
+    open: true,
+    compress: true,
+    hot: true,
+    port: 8080,
+  },
+
+  module: {
+    rules: [
+      // Styles: Inject CSS into the head with source maps
+      {
+        test: /\.(sass|scss|css)$/,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: { sourceMap: true, importLoaders: 1, modules: false },
+          },
+          { loader: 'postcss-loader', options: { sourceMap: true } },
+          { loader: 'sass-loader', options: { sourceMap: true } },
+        ],
+      },
+    ],
+  },
+})

config/webpack.prod.js

@@ -0,0 +1,55 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
+const { merge } = require('webpack-merge')
+
+const paths = require('./paths')
+const common = require('./webpack.common')
+
+module.exports = merge(common, {
+  mode: 'production',
+  devtool: false,
+  output: {
+    path: paths.build,
+    publicPath: '/',
+    filename: 'js/[name].[contenthash].bundle.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(sass|scss|css)$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 2,
+              sourceMap: false,
+              modules: false,
+            },
+          },
+          'postcss-loader',
+          'sass-loader',
+        ],
+      },
+    ],
+  },
+  plugins: [
+    // Extracts CSS into separate files
+    new MiniCssExtractPlugin({
+      filename: 'styles/[name].[contenthash].css',
+      chunkFilename: '[id].css',
+    }),
+  ],
+  optimization: {
+    minimize: true,
+    minimizer: [new CssMinimizerPlugin(), '...'],
+    runtimeChunk: {
+      name: 'runtime',
+    },
+  },
+  performance: {
+    hints: false,
+    maxEntrypointSize: 512000,
+    maxAssetSize: 512000,
+  },
+})

jsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "allowJs": true
+  }
+}

package.json

@@ -0,0 +1,50 @@
+{
+  "name": "webpack-boilerplate",
+  "version": "3.0.2",
+  "description": "Sensible webpack 5 boilerplate using Babel and PostCSS.",
+  "main": "index.js",
+  "author": "Tania Rascia",
+  "license": "MIT",
+  "scripts": {
+    "start": "cross-env NODE_ENV=development webpack serve --config config/webpack.dev.js",
+    "build": "cross-env NODE_ENV=production webpack --config config/webpack.prod.js",
+    "lint": "eslint 'src/**/*.js' || true",
+    "prettify": "prettier --write 'src/**/*.js'"
+  },
+  "keywords": [
+    "webpack",
+    "webpack 5",
+    "webpack boilerplate"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:taniarascia/webpack-boilerplate"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.7",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/preset-env": "^7.20.2",
+    "babel-loader": "^9.1.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.7.3",
+    "css-minimizer-webpack-plugin": "^4.2.2",
+    "eslint": "^8.31.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-import-resolver-webpack": "^0.13.2",
+    "eslint-plugin-prettier": "^4.2.1",
+    "html-webpack-plugin": "^5.5.0",
+    "mini-css-extract-plugin": "^2.7.2",
+    "postcss-loader": "^7.0.2",
+    "postcss-preset-env": "^7.8.3",
+    "prettier": "^2.8.1",
+    "sass": "^1.57.1",
+    "sass-loader": "^13.2.0",
+    "style-loader": "^3.3.1",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1",
+    "webpack-merge": "^5.8.0"
+  }
+}

postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    'postcss-preset-env': {
+      browsers: 'last 2 versions',
+    },
+  },
+}

src/index.js

@@ -0,0 +1,26 @@
+// Test import of a JavaScript module
+// import { example } from '@/js/example'
+
+// Test import of an asset
+// import webpackLogo from '@/images/webpack-logo.svg'
+
+// Test import of styles
+import '@/styles/index.scss'
+
+// Appending to the DOM
+// const logo = document.createElement('img')
+// logo.src = webpackLogo
+
+const heading = document.createElement('h1')
+heading.textContent = example()
+
+// Test a background image url in CSS
+const imageBackground = document.createElement('div')
+imageBackground.classList.add('image')
+
+// Test a public folder asset
+// const imagePublic = document.createElement('img')
+// imagePublic.src = '/assets/example.png'
+
+const app = document.querySelector('#root')
+app.append(logo, heading, imageBackground, imagePublic)

src/js/example.js

@@ -0,0 +1,3 @@
+export const example =
+  () => `Sensible webpack 5 boilerplate using Babel and PostCSS with a hot dev server 
+  and an optimized production build.`

src/styles/_scaffolding.scss

@@ -0,0 +1,25 @@
+html {
+  font-size: $font-size;
+  font-family: $font-family;
+  background: $background-color;
+  color: $font-color;
+  line-height: 1.4;
+}
+
+body {
+  margin: auto;
+  text-align: center;
+  max-width: $page-width;
+}
+
+h1 {
+  margin: 0 0 2rem;
+}
+
+.image {
+  display: inline-block;
+  height: 100px;
+  width: 100px;
+  //background-image: url('~assets/example.png');
+  background-size: cover;
+}

src/styles/_variables.scss

@@ -0,0 +1,5 @@
+$font-size: 1rem;
+$font-family: sans-serif;
+$background-color: #121212;
+$font-color: #dae0e0;
+$page-width: 650px;

src/styles/index.scss

@@ -0,0 +1,4 @@
+
+
+@import 'variables';
+@import 'scaffolding';

src/template.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+  </body>
+</html>