A super minimal and basic boilerplate that I use as starter-kit on my personal projects! ๐
- Babel - Use next generation JavaScript, today.
- BrowserSync - Time-saving synchronised browser testing.
- Tunnel - Make your website online through a random Public URL
- Jest with (Babel) - Delightful JavaScript Testing
- ESLint - The pluggable linting utility for JavaScript and JSX
- StyleLint - A mighty, modern CSS linter and fixer in your stylesheets.
git clone https://github.com/sandrina-p/essential-webpack-boilerplate.git your-project
cd your-project
- go to/your-project
foldernpm install
- get everything to run the projectnpm start
- run the project... wait a few seconds- A tab on Chrome should open - http://localhost:3001/ - you can rock with it ๐ฅ
npm test
- don't forget to test your code โ๏ธnpm run build
- set all the code ready and minified into/build
folder
This boilerplate is set for only 1 page: index.html
but is easy to add more pages. You just need to add the HTML and JS files to config/webpack.config.js
:
- On
line 83
you have all your project Pages. Eachnew HtmlWebpackPlugin
is used to create a new page.
// YOUR PROJECT PAGES
new HtmlWebpackPlugin({
chunks: ['index'], // where it is reading the JS files from
template: './index.html', // location of the HTML file
}),
To add a Page, add a new instance of HtmlWebpackPlugin
and create your HTML file. In this case the file is at ./pages/my-page/index.html
.
new HtmlWebpackPlugin({
chunks: ['index'],
template: './index.html',
}),
new HtmlWebpackPlugin({
chunks: ['my-page'],
template: './pages/my-page/index.html',
}),
chunks: ['my-page']
refers to the key of your JS file entry point (line 26
). There you set the entry points for your project. Each entry point is a JS file.
Just add a new entry-point with the same name as the chunks
value used on the step before.
entry: {
'index': './index.js',
'my-page': './pages/my-page/index.js',
},
That's it! Save the file, npm start
again and keep rocking at http://localhost:3001/pages/my-page/index.html
You also can have HTML files that use the same JS file:
new HtmlWebpackPlugin({
chunks: ['index'],
template: './index.html',
}),
new HtmlWebpackPlugin({
chunks: ['index'], // read from the same entry point as `index.html`
template: './pages/my-page/about.html',
}),
Just create an issue.
Have fun!