Basic Webpack Project Setup

This is going to be a multi-part post about setting up a basic webpack project. We’ll start with typescript but also cover using this for JavaScript in a later post.

Here is my basic project setup. Normally I create the folder for the project that I would like to create and open a terminal window in that directory. Let’s create an empty npm project by typing this in the terminal:

npm init -y

Now that we have a project, we need to install a few dependencies. These are going to be dev dependencies.

npm install --save-dev webpack webpack-cli webpack-dev-server mini-css-extract-plugin html-webpack-plugin css-loader clean-webpack-plugin babel-loader

Now that we have our basic packages, let's create our webpack config files. Create three files in the root of your project directory: webpack.common.js webpack.dev.js webpack.prod.js. Here are the contents of each file:

webpack.common.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  entry: path.resolve(__dirname, './src/index.ts'),
  module: {
    rules: [
      {
        test: /\.(js|ts)x?$/,
        loader: require.resolve('babel-loader'),
        exclude: /node_modules/,
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|jpg|gif|svg)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  output: {
    filename: 'bundle.[hash].js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'Typescript Testing',
    }),
  ],
};

webpack.dev.js

const webpackCommon = require('./webpack.common');
const path = require('path');

module.exports = {
  ...webpackCommon,
  devtool: 'inline-source-map',
  mode: 'development',
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    port: 3000,
    compress: true,
    client: {
      overlay: false
    }
  },
};

webpack.prod.js

const webpackCommon = require('./webpack.common');

module.exports = {
  ...webpackCommon,
  mode: 'production',
};

Now that we have the basic setup, we need a way to run our new project. Nothing fancy just yet, but we need some results, right? Open up the package.json file and add these two scripts:

 "build": "webpack --config webpack.prod.js",
 "start": "webpack-dev-server --config webpack.dev.js --open"

Now let’s create a src folder in the root of our project and add a file called index.ts

console.log("you are ready to start coding");

Now open up a terminal and type:

npm start

You should see webpack doing some stuff in your terminal and when it’s finished you will be able to open your project in the browser, right-click and select inspect and the go to the console and you should see something like this:

Just kidding, but this is actually it. Let’s see it in a slightly larger sample size:

Let’s break down what our webpack.common.js file is for

Rules

rules are used by webpack to decide how to load different types of files

Let’s go ahead and create a git repo so we can save our work, but before we do that we need to make sure that we include a gitignore file. We can do so by typing this into our terminal

npx gitignore node

After that we can commit everything and get it ready to push to github

git init
git add .
git commit -m "initial commit"

After we create the repository on github, we can set that as our remote origin and push up our changes

git remote add origin https://github.com/C5m7b4/blog_1_basic_setup.git

Of course you will change C5m7b4 to your github username

Now let’s push our code:

git push -u origin master

We will want to have a readme file which we will create in the next post when we add eslint to our project. Other than that, you have a starter for a webpack project.