wonderfulwebpack

Webpack: The Simplest Config Evar.

by ✨ Kevin B. Ridgway ✨

How does one get started with Webpack? Well, with the simplest Webpack config evar of course. Tots.

Here’s how we slay this beast, start by running the following

You need to install webpack first via npm:

1
2
3
mkdir myfirstwebpackproject && cd myfirstwebpackproject;
npm init -y;
npm install webpack;

Ok, simplest webpack config, one entrypoint, one output:

1
2
3
4
5
6
7
8
//webpack.config.js file
module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    }
};
1
2
//entry.js
document.write("It works.");
1
2
3
4
5
6
7
8
9
10
/* Your index.html that you include your bundle.js file with */
<html>
    <head>
        <meta charset="utf-8">
        <title>ZOMG Webpack <3</title>
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>