Webpack Introduction 1

1 min readJun 3, 2021

This article is to introduce Webpack five core concepts. And the next article is going to introduce how to apply Webpack into a simple project.

Webpack Concepts

Webpack is a static module bundler for modern JavaScript applications, which means bundle your assets (Html, Css, JavaScript, Images…) into static assets. There are five core concepts, Entry, Output, Loaders, Plugins and Mode.

1. Entry

Point out the entry files, it can be both string and array.

string: entry: “./src/js/index.js”
array: entry: [“./src/js/index.js”, “./src/index.html”]

2. Output

Point out the output location and output name

output: {
filename: “js/built.[contenthash:10].js”,
path: resolve(__dirname, “build”),
},

3. Loader

As Webpack only can understand JavaScript, loader can transfer un-JavaScript files into special ‘JavaScript’ files.

For example, css-loader is to handle css files, less-loader is to handle less files, and html-loader is to handle html files.

modules: { rules: [
{ test: /\.(jpg|png|gif)$/, loader: “url-loader”}
{ test: /\.html$/i, loader: “html-loader”}
]}

4. Plugins

Be similar to Loader, but more power, range from bundle optimisation, asset management and injection of environment.

plugins: [
new MiniCssExtractPlugin({ filename: “css/built.[contenthash:10].css”,})
]

5. Mode

There are two mode parameter, development and production (default).

mode: “production”