Setting up a JavaScript workflow with Babel and Webpack

1

Hi!

I’m currently working my way on a Django project, and would like to incorporate Node/NPM to my workflow. The primary reason is to allow usage of ES6+ and SASS on my static files. Anyway, I currently have the following setup:

<project_root>
├── <django_project_root>
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   ├── views.py
│   └── wsgi.py
├── lib // Compiled stuff.
│   └── app.js
├── LICENSE
├── manage.py
├── package.json
├── README.md
├── requirements.txt
├── src // Uncompiled 'source'
│   └── app.js
├── templates
│   └── index.djt
├── static // What gets referenced in my templates.
│   └── app.js
└── webpack.config.js

Now, I would like to write my JS/SCSS inside my src directory, and then:

  1. Babel do its thing and output an ES5 friendly version of whatever is in src into the lib folder.
  2. Webpack grabs what’s in lib and spits out a browser friendly version into a static folder.
  3. Templates inside the tempaltes directory loads the contents of the static folder.
  4. Note that I keep both lib and static out of version control. Which is correct, since I only need the src file, right?

Anyway, I can successfully do the workflow above with ES6 js files inside src. But I’m clueless on what to do to do the same with SCSS files.

Relevant files:

// package.json
{
  // ....
  "scripts": {
    "build": "babel src -d lib && webpack"
  },
 // ...
}

// webpack.config.js
module.exports = {
    entry: './lib/app.js',
    output: {
      filename: './static/js/app.js',
    }
};

How should I continue? Please do tell me if I need to provide more information. Thanks!

2 
// installing the packages
npm install style-loader css-loader sass-loader node-sass --save-dev

// webpack.config.js
module: {
  rules: [
    {
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
    }
  ]
}

// how to use
import the `.scss` files in your `.js` file.
this will compile your scss to css and insert it in html's `<head>`

ref: style-loader, css-loader, sass-loader

if you want to compile the .scss into a .css file then you’ll need another plugin
extract-text-webpack-plugin

you could also try and fiddle on some simple starter kit, they’re usually scss-ready