A boilerplate for a single page app using webpack
So far, this is the best way I found to build files like index.html into
webpack. This boilerplate handles Javascript, CSS and HTML
bundling using only webpack.
The general directory structure is:
├── assets/
│ └── image
│ └── favicon.png
├── index.html
├── package.json
├── environment.json
├── plugins/
│ └── html-plugin.js
├── README.md
├── scripts/
│ └── index.js
├── styles/
│ └── index.less
└── webpack.config.js
- Your javascript entry point is
scripts/index.js - Your style entry point is
styles/index.less - 'environment.json' file provides optional environment variable settings, but you can delete it if you don't need it.
- The
plugins/html-plugin.jsfile is better explained on the About section, with thehtml-parser-pluginplugin.
There's a hack to build HTML files, replacing the src and href tags related
to images into their corresponding file in dist directory. This way, a
index.html file that looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Sample App</title>
<meta charset="utf-8"/>
<link href="!assets/image/favicon.png" rel="icon"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="script.js"></script>
</body>
</html>
Becomes this:
<!DOCTYPE html>
<html>
<head>
<title>Sample App</title>
<meta charset="utf-8">
<link href="84eafba88857e5fd2e85d63beaf3fb31.png" rel="icon">
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="script.js"></script>
</body>
</html>
Notice that the favicon.png file was replaced with
84eafba88857e5fd2e85d63beaf3fb31.png. This happened because the favicon.png
file link was marked with a ! prepending it - it tells the plugin that the
url should be bundled and replaced.
This boilerplate includes the following loaders:
babel-loader: Enable ES6 features.file-loader: Callrequirefor binary files.img-loader: Optimize image compression.json-loader: Callrequireforjsonfiles.less-loader: Style your pages with less.style-loader: Add exports of a module as style to DOM.
It also includes the following plugins:
extract-text-webpack-plugin: Extract css text from bundled styles.html-parser-plugin: Custom experimental plugin to enable html parsing on webpack. It is used to emit aindex.htmlfile along with it's images.
This code is released under CC0 (Public Domain)