Multipack Webpack Plugin is a template for building web appllication that mixes a Webpack-powered frontend and a backend that generates multiple pages.
Features:
- Webpack configuration:
- Css bundle
- JavaScript bundle
- Source maps
- Compatible with
webpack-dev-server
- Single JavaScript module per page
- Each backend page can reference a JavaScript module by adding a
data-module-idattribute in its<body>element
git clone https://github.com/amrtn/multipage-webpack-boilerplate.git
npm install- Initialize the project
npm install- Run it in development mode with
webpack-dev-serveron port 8080 (default).
npm run dev- Load http://localhost:8080 on a web browser to check the installation. If it doesn't work check step 2 console output for the correct URL.
Multipage Webpack Boilerplate will create the structure of the frontend webapp for your
Css files are stored in the css directory. You add new css rules to the default style.css file or create a new css file inside the css directory.
To link a new css file (e.g. myappstyles.css) to the css distribution bundle you can use any of these approaches:
- Import css files in
js/app.jsto add it to the css bundle (see/js/app.js):
import myappstyles from `./css/myappstyles.css`;- Add an
@importstatement incss/styles.css(see/css/styles.cssand/css/imported-styles.css)
- TODO
Each html page should have a data-module-id attribute attached to the <body> tag. This attribute should contain an unique page id that is used to locate the correct js module to invoke when the page is loaded. When the DOM finishes loading an onReady function will be executed in the javascript module that matches its id property with the content of the data-module-id.
For example:
The /page1.html file
<html>
<head>
<title>Page1</title>
<link rel="stylesheet" href="dist/styles.css">
</head>
<body data-module-id="page1-module">
Page 1
<script src="dist/bundle.js"></script>
</body>
</html>will invoke the /js/pages/page1.js's onReady function when the DOM finishes loading:
module.exports = {
id: 'page1-module',
onReady: () => {
console.log('Page 1!');
}
}You can learn more about js page modules in the documentation.
- TODO
- TODO
Bootstrap 3 is enabled by default. To disable it set "useBootstrap3": false in package.json
- TODO
- TODO
- TODO
To build the bundles execute
npm run build- Álvaro Martín - Initial work - amrtn
This project is licensed under the MIT License - see the LICENSE.md file for details
- Hat tip to anyone who's code was used
- Inspiration
- etc