webpack.config.js, package.json sample for a typical project

django-webpack.md

Package Json file

Filename package.json

{
  "name": "rane_monitoring_django_app",
  "version": "1.0.0",
  "description": "Web application for RANE",
  "main": "index.js",
  "scripts": {
    "dev": "NODE_ENV=development webpack --progress --hide-modules",
    "prod": "NODE_ENV=production webpack --progress --hide-modules",
    "watch": "NODE_ENV=development webpack --progress --hide-modules"
  },
  "repository": {
    "type": "git",
    "url": "git+ssh://[email protected]/rane-network/rane_monitoring_django_app.git"
  },
  "author": "Rajan Paneru",
  "license": "ISC",
  "homepage": "https://bitbucket.org/rane-network/rane_monitoring_django_app#readme",
  "devDependencies": {
    "inline-edit": "^1.1.1",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "bootstrap": "^3.3.7",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "html-webpack-plugin": "^3.2.0",
    "jquery": "^3.3.1",
    "jquery-ui": "^1.12.1",
    "jquery.inputmask": "^3.3.4",
    "mini-css-extract-plugin": "^0.4.0",
    "moment": "^2.22.2",
    "moment-timezone": "^0.5.20",
    "node-sass": "^4.9.0",
    "quill": "^1.3.6",
    "sass-loader": "^7.0.3",
    "select2": "^4.0.6-rc.1",
    "vue": "^2.5.16",
    "vue-paginate": "^3.6.0",
    "webpack": "^4.12.1",
    "webpack-cli": "^3.0.8"
  }
}

Typical configuration of django app and webpack

File Name is webpack.config.js

let webpack              = require('webpack');
let path                 = require('path');
let MiniCssExtractPlugin = require("mini-css-extract-plugin");
let isProduction         = process.env.NODE_ENV === 'production';
let CleanWebpackPlugin   = require('clean-webpack-plugin');
let HtmlWebpackPlugin    = require('html-webpack-plugin');
let FileSystem           = require("fs");

function _path(p) {
    return path.resolve(__dirname, p);
}

module.exports = {
    entry:       {
        vendor: [
            _path('rane_app/rane_app/static/assets/src/bundle.js'),
            _path('rane_app/rane_app/static/assets/src/js/hideMaxListItem.min.js'),
            _path('rane_app/rane_app/static/assets/src/js/jquery.editable.js')

        ],
        app:    [
            _path('rane_app/rane_app/static/assets/src/js/app.js'),
            _path('rane_app/rane_app/static/assets/src/scss/init.scss'),
            _path('rane_app/rane_app/static/assets/font/latofonts.css'),
            _path('rane_app/rane_app/static/assets/font/icon-font-rane.css'),
            _path('rane_app/rane_app/static/assets/src/css/custom.css')
        ]

    },
    output:      {
        path:     _path("rane_app/rane_app/static/assets/dist"),
        filename: "[name].[chunkhash].js"
    },
    mode:        process.env.NODE_ENV,
    performance: {
        hints: false
    },
    module:      {
        rules: [
            {
                test:    /\.js$/,
                exclude: /node_modules/,
                loader:  "babel-loader",
                query:   {

                    presets: ['es2015']

                }

            },
            {
                test: /\.s[ac]ss$/,
                use:  [
                    {
                        loader:  MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: './rane_app/static/assets/dist/'
                        }
                    },
                    {
                        loader:  "css-loader",
                        options: {
                            url: false
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            },
            {
                test: /\.css$/,
                use:  [
                    {
                        loader:  MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: './rane_app/static/assets/dist/'
                        }
                    },
                    {
                        loader:  "css-loader",
                        options: {
                            url: false
                        }
                    }
                ]
            }
        ]
    },
    plugins:     [
        new MiniCssExtractPlugin({
            filename: "[name].[chunkhash].css"
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: isProduction
        }),
        new webpack.ProvidePlugin({
            $:      "jquery",
            jQuery: 'jquery',
            Vue:    'vue',
            moment: 'moment'
        }),
        new CleanWebpackPlugin(_path('rane_app/rane_app/static/assets/dist')),
        function () {
            this.plugin("done", function (statsData) {
                let stats = statsData.toJson();
                if (!stats.errors.length) {
                    let basePath = _path('rane_app/templates/base.html');
                    FileSystem.readFile(basePath, 'utf8', function (err, html) {
                        if (err) {
                            return console.log(err);
                        }
                        html = html.replace(/dist\/vendor.*css/g, "dist/" + stats.assetsByChunkName.vendor[0]);
                        html = html.replace(/dist\/vendor.*js/g, "dist/" + stats.assetsByChunkName.vendor[1]);
                        html = html.replace(/dist\/app.*css/g, "dist/" + stats.assetsByChunkName.app[0]);
                        html = html.replace(/dist\/app.*js/g, "dist/" + stats.assetsByChunkName.app[1]);
                        FileSystem.writeFile(basePath, html, 'utf8', function (err) {
                            if (err) return console.log(err);
                        });
                        console.info("Style and Script file names are changed successfully!");
                    });
                }
            });
        }
    ],
    resolve:     {
        alias: {
            'vue':                          _path('node_modules/vue/dist/vue.common.js'),
            'jquery':                       _path('node_modules/jquery/dist/jquery'),
            'inputmask.dependencyLib':      _path('node_modules/jquery.inputmask/dist/inputmask/inputmask.dependencyLib'),
            'inputmask':                    _path('node_modules/jquery.inputmask/dist/inputmask/inputmask'),
            'jquery.inputmask':             _path('node_modules/jquery.inputmask/dist/inputmask/jquery.inputmask'),
            'inputmask.numeric.extensions': _path('node_modules/jquery.inputmask/dist/inputmask/inputmask.numeric.extensions')
        }
    }
};
if (!isProduction) {
    module.exports.devtool = 'source-map';
}