Webpack config that uses
sass
to convert.scss
to.css
and transform newer (ES6 and up) JavaScript withbabel
**If you want to change the html, change the file: index.ejs
. And your main entry point for writing javascript is in app.js
.
In app.js
I have imported main.scss
so webpack will convert the scss-files and output them as styles.css
in dist
-folder. As long as you don't delete that line you should just be able to write scss
and js
as usual. Your finshed files are located inside of the dist
-folder.
- Clone this repository
cd
into the folderwebpack-boilerplate
that is created when cloning- Install all dependencies with
npm
npm install
To run development server on localhost (you can choose port of your choice in the config-file)
npm run dev
To create a production ready build that is minified and properly packed:
npm run build
- Webpack
- Webpack handles converting and packaging all the resources in your project so they can be read by a browser.
- Webpack-dev-server
- Webpack does not handle creating a
localhost
and serving the content, you need to have a separate module that handles reloading and updating the page when in development mode
- Webpack does not handle creating a
- Webpack Dashboard
- yeah this is just for show, a cool dashboard, doesn't do anything special
- Webpack Babel Loader
- Handles converting JavaScript with Babel
- Style-loader
- Handles
<style>
-tags and inserting css via webpack. Needed for loading CSS
- Handles
- CSS-loader
- Makes it possible to do
import './styles.css
inside ourapp.js
-file. Without this loader, webpack does not know how to handle.css
-files.
- Makes it possible to do
- Sass-loader
- Makes it possible to do
import './styles.scss
inside ourapp.js
-file. Without this loader, webpack does not know how to handle.scss
-files.
- Makes it possible to do
- ExtractTextPlugin
- By default, webpack inlines css into your JavaScript, it does not actually create a
.css
-file. This plugin handles extracting thecss
into a separate file.
- By default, webpack inlines css into your JavaScript, it does not actually create a
- HtmlWebpackPlugin
- This plugin handles creating a
index.html
fromindex.ejs
. This is mainly so we don't have to handle linking and moving our files, webpack moves and inserts script-tags for us.