Start HTML project with Webpack

This article will teach you how to create a Webpack project and set up a base package.json for modifying an HTML template. This article describes how to use basic Webpack configuration
Also for work, you will need one of the package managers Yarn or NPM. If you are looking for an easier way, then you should take a look at primitive CSS/JS customization.

This article does not cover the installation of yarn, but to get started you need to have it installed on your computer.

Step 1

Unpack the archive with the product you purchased on Envato Market – this will be your working folder and the root directory of your project.

Project root directory
Project root directory
Step 2

In the console and terminal of your operating system or IDE, write the command to start a new project

yarn init 

You can set the basic project settings in the terminal or press enter several times to use the default values

Default project settings
Default project settings

After that, a package.json the file will appear at the root of your project. The file will contain the basic required parameters, but you can add additional data if needed. Find out more about the package.json guide.

Step 3

Visit the page of the template you purchased on Envato and looking for a list of dependencies in the product description. Copy the dependencies list and paste it in package.json

Example of the package.json with dependencies
Example of the package.json with dependencies

Install these dependencies with a terminal command

yarn install

After completion, a yarn.lock file and a node_modules folder will appear in your root folder. These new files are needed to ensure your project’s performance – do not delete them and do not modify them.

Step 4

Install developer dependencies. To do this, run the command:

yarn add webpack webpack-cli webpack-dev-server require-dir --dev
Step 5

Create a webpack.config.js file for the Webpack in your root folder:

const path = require('path');

module.exports = {
  entry: './Template/js/index.js',
  output: {
    path: path.resolve(__dirname, 'Template'),
    filename: 'index.js',
  },
};

This is a basic configuration file, but you can add all the necessary parameters to it. Find out more about Webpack configuration.

Step 6

Add scripts to run tasks to the package.json

"scripts": {
  "build": "webpack --progress",
  "start": "webpack-dev-server --progress"
}

If your package.json looks something like this, then you are ready to run the project

package.json example
package.json example

How to modify the code and run Webpack

Change the JavaScript code of the source files located in Template/js/ and run the build script. To do this, run the console command

yarn run build

As a result of executing the command, a compiled file with changes will be created in the root of the Template folder. Connect it to the required page to check if the changes you made to the code work correctly.

Conclusions

What is described in this article is the most basic modification of the template code, which will help you make a few small changes to JavaScript. If you are planning to develop a large project with many changes, then we recommend that you use a more complex Webpack configuration file or the Gulp + Webpack bundle for more automated work.

Also, remember that we can always do your job for you) Find out more about our customization prices or contact our support team.

Was this article helpful to you?