javascript - 使用webpack-dev-server设置Django(Setup Django with webpack-dev-server)

Question

setting up webpack-dev-server with Django has not been working.

(使用Django设置webpack-dev-server无效。)

I have looked at many stackoverflow questions and read tuts but I can't seem to find what I am doing wrong.

(我看了很多stackoverflow问题并阅读了tut，但似乎找不到我做错了什么。)

Here are the errors I get:

(这是我得到的错误：)

1. webpack fails compiling with a ton of

   (webpack无法编译大量)

ERROR in ./node_modules/[package_name]/index.js
Module not found: Error: Can't resolve '[tls or fs or net]' in '/Users/user_name/project_folder/sub_folder/node_modules/[package_name]'

2. Even with webpack failing the browser load http://localhost:8080 with Cannot GET / error on it

   (即使webpack无法使浏览器加载http://localhost:8080 ，但Cannot GET /错误)

I am using webpack-dev-server : "^3.9.0"

(我正在使用webpack-dev-server : "^3.9.0")

Here is my webpack.config.js

(这是我的webpack.config.js)

var path = require("path");
var BundleTracker = require('webpack-bundle-tracker');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var MiniCssExtractPlugin = require('mini-css-extract-plugin');
var TerserPlugin = require('terser-webpack-plugin');
var webpack = require('webpack')


var rules = mode => {
    return [
        {
            test: /.(ttf|eot|svg|woff|woff2|svg)?(?[a-z0-9#=&.]+)?$/,
            loader: 'file-loader',
        },
        {
            test: /.(js|jsx|mjs)$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options:
            {
                presets: [
                    ['@babel/preset-env', { corejs: 3, useBuiltIns: 'usage' }],
                    ['@babel/preset-react'],
                ],
                plugins: [
                    ["babel-plugin-styled-components"],
                    ["@babel/plugin-proposal-decorators", { legacy: true }],
                    ["@babel/plugin-proposal-class-properties", { "loose": true }],
                    "react-hot-loader/babel"
                ],
                cacheDirectory: true
            }
        }, // to transform JSX into JS
        {
            test: /.(sa|sc|c)ss$/,
            use: [{
                loader: MiniCssExtractPlugin.loader,
                options: {
                    hmr: mode === 'development' ? true : false,
                },
            },
            { loader: 'css-loader', options: { importLoaders: 1 } },
                'postcss-loader',
                'resolve-url-loader',
                'sass-loader',
            ],
        }
    ];
}


module.exports = (env, argv) => {

    const mode = argv.mode;

    return [
        {
            entry: {
                'dashboard': './dashboard/assets/ui/app/index.jsx',
                'intake-form': './minisite/assets/base/intake-form',
            },
            output: {
                path: path.resolve(
                    mode === 'production'
                        ? './dashboard/static/bundles-production/'
                        : './dashboard/static/bundles-dev/'
                ),
                filename: "[name]-[hash].js",
            },
            module: { rules: rules(mode) },
            resolve: {
                modules: ['node_modules', 'bower_components'],
                extensions: ['.js', '.jsx'],
                alias: {
                   cs: path.resolve(__dirname, 'dashboard/assets'),
                }
            },
            optimization: {
                splitChunks: {
                    cacheGroups: {
                        vendor: {
                            chunks: "initial",
                            test: path.resolve(__dirname, "node_modules"),
                            name: "dashboard-vendor",
                            enforce: true
                        }
                    }
                },
                minimizer: [new TerserPlugin()],
                nodeEnv: mode,
            },
            plugins: [
                mode == 'development'
                    ? new CleanWebpackPlugin({
                        cleanOnceBeforeBuildPatterns: [
                            mode === 'production'
                                ? './dashboard/static/bundles-production/'
                                : './dashboard/static/bundles-dev/'
                        ]
                    })
                    : f => f,

                mode === 'production'
                    ? new BundleTracker({ filename: './webpack-stats-dashboard.production.json' })
                    : new BundleTracker({ filename: './webpack-stats-dashboard.json' }),

                new MiniCssExtractPlugin({ filename: '[name]-[contentHash].css' }),
                new webpack.HotModuleReplacementPlugin(),
            ],
            devServer: {
                contentBase: path.join(__dirname, "./"),
                historyApiFallback: true,
                //port: 9000,
                inline: true,
                hot: true,
                stats: 'errors-only',
                open: true,
            },
            devtool: mode === 'development' ? 'inline-source-map' : undefined,

        }
    ]
};

The webpack config in settings.py is as follow

(settings.py中的webpack配置如下)

INSTALLED_APPS = (

    ...

    'webpack_loader',

)


################################################################
#
#       WEBPACK
#
################################################################

WEBPACK_DASHBOARD_BUNDLE_DIR_NAME = '/static/bundles-production/' if WEBPACK_USE_PRODUCTION_BUNDLES else 
                                    '/static/bundles-dev/'
WEBPACK_DASHBOARD_STATS_FILES = 'webpack-stats-dashboard.production.json' if WEBPACK_USE_PRODUCTION_BUNDLES else 
                                    'webpack-stats-dashboard.json'
WEBPACK_MINISITE_BUNDLE_DIR_NAME = '/static/bundles-production/' if WEBPACK_USE_PRODUCTION_BUNDLES else 
                                    '/static/bundles-dev/'
WEBPACK_MINISITE_STATS_FILES = 'webpack-stats-minisite.production.json' if WEBPACK_USE_PRODUCTION_BUNDLES else 
                                    'webpack-stats-minisite.json'


WEBPACK_LOADER = {
    'DASHBOARD'    : {
        'BUNDLE_DIR_NAME': WEBPACK_DASHBOARD_BUNDLE_DIR_NAME,
        'STATS_FILE': os.path.join(BASE_DIR, WEBPACK_DASHBOARD_STATS_FILES),
    },
    'MINISITE'    : {
        'BUNDLE_DIR_NAME': WEBPACK_MINISITE_BUNDLE_DIR_NAME,
        'STATS_FILE': os.path.join(BASE_DIR, WEBPACK_MINISITE_STATS_FILES),
    }
}

Here is my index.html file

(这是我的index.html文件)

{% load custom_tags %}
{% load get_files from webpack_loader %}
{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html style='min-height:100%;'>

    <head>
        <meta charset="UTF-8">
        <title>Website Name</title>
    </head>


    <body>
        <div id="app"></div>

        {% render_bundle 'dashboard-vendor' 'js' 'DASHBOARD' %}
        {% render_bundle 'dashboard' 'js' 'DASHBOARD' %}
    </body>
</html>

and the command line I am using is

(我正在使用的命令行是)

webpack-dev-server --mode=development webpack.config.js

Thanks in advance for your help.

(在此先感谢您的帮助。)

  ask by lucasboko translate from so

Answer 1

等待大神答复