One limitation however was, that the main entry point had to be an HTML file. This is in contrast to most Webpack setups, where the entry point is a JS file.
In the following, I will briefly describe the tools and features included in this setup.
This project is for you if you want to
- refactor an existing application into modules (without Angular or React)
- have a clearly arranged Webpack setup which can be easily extended
- introduce a common code style
- use jQuery to manipulate the DOM
Checkout the project from my Github repository at https://github.com/matthiassommer/webpack-classic-website-template
Tools and Features
The project setup features the following technologies and tools:
- ESLint reports code issues.
- Babel polyfill emulates a full ES2015+ environment for browser support.
- HandlebarsJS decouples HTML snippets from the JS code.
- jQuery and jQueryUI for HTML document manipulation, event handling, and user interface interactions.
Many Webpack setups online are packed with tons of plugins and features and you need hours to understand everything. In contrast, I keep the setup as easy as possible, still including a number of valuable features.
Additionally, I included two configuration files. One is for development, where you can use Hot Module Replacement. It rebuilds on file changes without deploying the whole application. Thereby, it speeds up the development process.
The other configuration file is used for distribution, where additional plugins, such as UglifyJs, OccurrenceOrderPlugin, and AggressiveMergingPlugin, are executed to compress the file size.
ESLint checks your code at compile time. It reports issues related to code style and other potential problematic patterns. Thereby, you can enforce code style conventions for the developers on your team. Again, it has full support for ECMAScript 6. Predefined rule sets, such as eslint:recommended, are readily available.
- Download Node.js from https://nodejs.org/en/download/ and install it.
- Clone or download the project from Github: https://github.com/matthiassommer/webpack-classic-website-template
- Go to the project folder and open a command line. To install the packages execute
NPM will download and install packages as speficied within package.json.
To build the application with automatic rebuilding of files during development, start the application with
npm run build
This will execute webpack –progress –watch –config webpack.config.js.
To bundle your application for production, execute
npm run dist
which executes webpack –config webpack.prod.config.js .
Additionally, you can run npm run clean to empty your dist folder.
The distribution folder
Once you execute Webpack, it bundles all your code, assets, and so on, and puts it into the dist directory. Finally, your distribution folder will look like this:
Thereby, your entry point will be index.html with plain HTML. It has only one script include, that is bundle.js.
If you would to see additional features or tool support in this setup, please let me know in the comment section!