Webpack Starter 🚀

Webpack Starter is a simple webpack config meant for projects using vanilla javascript.

What does Webpack Starter do?

• It loads html and imports partials using the HTMLWeabpackPlugin
• It transpiles ejs and pug into html using either the ejs-plain-loader or the pug-plain-loader
• It transpiles ES6 code to ES5 using babel
• It transpiles sass into css using sass-loader
• It ensures browser compatility using autoprefixer
• It inlines critical styles using the critical-plugin for webpack
• It removes unused css rules using purgecss
• It creates a development server using webpack-dev-server
• It adds offline support using webpack-workbox-plugin

Install dependencies

npm install

Start the development server

npm start

Build for production

npm run build

Deploy do GitHub Pages

npm run deploy

It deploys the latest build, found inside the dist folder, to the gh-pages branch.
If you would like to automatically build before deploying, go to the package.json file and inside "scripts" add a "predeploy" run the build script.

{
    ...

    "scripts": {
        "build": "webpack --mode production --config webpack.prod.js",
        "postbuild": "node scripts/minifyHtml",
+       "predeploy": "npm run build",
        "deploy": "git add dist/\\* && git commit -m \"chore: Deploy to gh pages\" && git subtree split --prefix dist -b gh-pages && git push --force origin gh-pages && git branch -D gh-pages && git reset HEAD~",
        "start": "webpack-dev-server --mode development --config webpack.dev.js"
    },

    ...
}

How to import html files instead of ejs or pug files

Inside an html file add the fallowing code

<!-- header goes here -->
${require('./partials/header.html')}

...

<!-- footer goes here -->
${require('./partials/footer.html')}

Inside webpack.common.js look for the HTMLWebpackPlugin and replace the .pug extension with .html

plugins: [
    ...

    new HtmlWebpackPlugin({
-       template: './src/views/index.ejs',
+       template: './src/views/index.html',
        chunks: ['main']
    }),

    ...
]

That is about it. Remember either to restart the server or rebuild.