Webpack configuration for react and django app

Question

I am planning to make a boilerplate in GitHub between React and Django To facilitate me later When I start a project

I chose the connection method React as Django app

django-admin startapp frontend

The problem I am facing now is that I am using the Django templates. I cannot split packages using wepback because there must be {load static} {static ''index.js"}

However, I cannot use Splitchuncks in configuring a webpack or HTML plugin to insert script tags into HTML. The entire code must be inside one js file and that too with CSS

webpack.config.js

const path = require("path");
const webpack = require("webpack");
// const TerserPlugin = require('terser-webpack-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const devMode = process.env.NODE_ENV !== "production";

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/frontend"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },

      {
        test: /\.css$/,

        use: [
          devMode ? "style-loader" : MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
        ],
      },
      {
        test: /\.(ttf|eot|woff|woff2|jpg|jpeg|png|gif|mp3|svg|ico)$/,
        loader: "file-loader",
        options: {
          outputPath: path.resolve(__dirname, "./static/images"),
        },
      },
    ],
  },
  optimization: {
    minimize: true,
    // splitChunks: {
    //   chunks: 'all',
    //   name: false,
    // },
  },
  plugins: [
    new HtmlWebpackPlugin(
      Object.assign(
        {},
        {
          inject: true,
          template: "./templates/frontend/index.html",
        },
        devMode
          ? undefined
          : {
              minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeRedundantAttributes: true,
                useShortDoctype: true,
                removeEmptyAttributes: true,
                removeStyleLinkTypeAttributes: true,
                keepClosingSlash: true,
                minifyJS: true,
                minifyCSS: true,
                minifyURLs: true,
              },
            }
      )
    ),
    new webpack.DefinePlugin({
      "process.env": {
        // This has effect on the react lib size:::: Note Change to production in production build
        NODE_ENV: JSON.stringify("development"),
      },
    }),
    new MiniCssExtractPlugin({
      filename: "static/css/[name].[contenthash:8].css",
      chunkFilename: "static/css/[name].[contenthash:8].chunk.css",
    }),
  ],
};

Should I ever think about changing the connection method? Or not there is a problem using one file that carries the entire code

Any advice on changing the method of communication or any article on communication methods react inside django is very welcome

Webpack configuration for react and django app

0 Answers