使用 webpack-dev-server 设置 Django

Question

使用 Django 设置 webpack-dev-server 没有奏效。 我查看了许多 stackoverflow 问题并阅读了 tuts，但我似乎无法找到我做错了什么。

以下是我得到的错误：

1. 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. 即使 webpack 失败，浏览器加载http://localhost:8080并且Cannot GET /错误

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

这是我的 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,

        }
    ]
};

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),
    }
}

这是我的 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>

我使用的命令行是

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

在此先感谢您的帮助。

Answer 1

TerserPlugin 如果仍然出现此错误，您是否尝试删除此插件

.这件事也发生在我身上检查 node_module 中的 package_folder 如果它包含 index.js 如果不包含检查 index.js 的文件夹子目录中然后将其复制到包根目录