HtmlWebpackPlugin引发TypeError:无法读取未定义的属性“hash”更新到Webpack5后

plicqrtu  于 12个月前  发布在  Webpack
关注(0)|答案(2)|浏览(148)

我正在更新我们的Web应用程序中的库到最新版本,从而将Webpack推到Webpack5。当调整'webpack.tag.dev.js'的参数时,我在编译过程中不断遇到以下错误:

...../node_modules/webpack/lib/NormalModule.js:1306
                hash.update(this.buildInfo.hash);
                                           ^

TypeError: Cannot read property 'hash' of undefined

字符串
以下是我目前为止的webpack.js.dev.js文件(我删除了注解,试图让它更短一点):

'use strict';

const autoprefixer = require('autoprefixer');
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const eslintFormatter = require('react-dev-utils/eslintFormatter');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getClientEnvironment = require('./env');
const paths = require('./paths');

const publicPath = 'http://localhost:3000/';
const publicUrl = 'http://localhost:3000/';
const env = getClientEnvironment(publicUrl);

const BundleTracker = require('webpack-bundle-tracker');

// This is the development configuration.
// It is focused on developer experience and fast rebuilds.
// The production configuration is different and lives in a separate file.
module.exports = {
    devtool: 'cheap-module-source-map',
    entry: [
        require.resolve('./polyfills'),
        require.resolve('webpack-dev-server/client') + '?http://localhost:3000',
        require.resolve('webpack/hot/dev-server'),
        paths.appIndexJs,
    ],
    output: {
        pathinfo: true,
        filename: 'static/js/bundle.js',
        chunkFilename: 'static/js/[name].chunk.js',
        publicPath: publicPath,
        devtoolModuleFilenameTemplate: info =>
            path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
    },
    resolve: {
        modules: ['node_modules', paths.appNodeModules].concat(
            process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
        ),
        extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
        alias: {
            'react-native': 'react-native-web',
        },
        plugins: [
            new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
            new BundleTracker({path: paths.statsRoot, filename: 'webpack-stats.dev.json'}),
        ],
        fallback: {
            dgram: false,
            fs: false,
            net: false,
            tls: false,
            child_process: false
        }
    },
    module: {
        strictExportPresence: true,
        rules: [
            {
                test: /\.(js|jsx|mjs)$/,
                enforce: 'pre',
                use: [
                    {
                        options: {
                            formatter: eslintFormatter,
                            eslintPath: require.resolve('eslint'),
                        },
                        loader: require.resolve('eslint-loader'),
                    },
                ],
                include: paths.appSrc,
            },
            {
                oneOf: [
                    {
                        test: /\.worker\.(js|jsx|mjs)$/,
                        include: paths.appSrc,
                        use: [
                            require.resolve("worker-loader"),
                            require.resolve("thread-loader"),
                            {
                                loader: require.resolve("babel-loader"),
                                options: {
                                    babelrc: false,
                                    presets: [require.resolve("babel-preset-react-app")],
                                    cacheDirectory: true,
                                    highlightCode: true,
                                },
                            },
                        ],
                    },
                    {
                        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
                        loader: require.resolve('url-loader'),
                        options: {
                            limit: 10000,
                            name: 'static/media/[name].[hash:8].[ext]',
                        },
                    },
                    {
                        test: /\.(js|jsx|mjs)$/,
                        include: paths.appSrc,
                        loader: require.resolve('babel-loader'),
                        options: {
                            cacheDirectory: true,
                        },
                    },
                    {
                        test: /\.(html)$/,
                        use: {
                            loader: 'html-loader',
                            options: {
                                minimize: true
                            }
                        }
                    },
                    {
                        test: /\.css$/,
                        use: [
                            require.resolve('style-loader'),
                            {
                                loader: require.resolve('css-loader'),
                                options: {
                                    importLoaders: 1,
                                },
                            },
                            {
                                loader: require.resolve('postcss-loader'),
                                options: {
                                    ident: 'postcss',
                                    plugins: () => [
                                        require('postcss-flexbugs-fixes'),
                                        autoprefixer({
                                            browsers: [
                                                '>1%',
                                                'last 4 versions',
                                                'Firefox ESR',
                                                'not ie < 9', 
                                            ],
                                            flexbox: 'no-2009',
                                        }),
                                    ],
                                },
                            },
                        ],
                    },
                    {
                        exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
                        loader: require.resolve('file-loader'),
                        options: {
                            name: 'static/media/[name].[hash:8].[ext]',
                        },
                    },
                ],
            },
            // ** STOP ** Are you adding a new loader?
            // Make sure to add the new loader(s) before the "file" loader.
        ],
    },
    plugins: [
        new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
        // Generates an `index.html` file with the <script> injected.
        new HtmlWebpackPlugin({
            // inject: true,
            template: paths.appHtml,
            hash: false,
        }),
        new webpack.DefinePlugin(env.stringified),
        new webpack.HotModuleReplacementPlugin(),
        new CaseSensitivePathsPlugin(),
        new WatchMissingNodeModulesPlugin(paths.appNodeModules),
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
        new BundleTracker({path: paths.statsRoot, filename: 'webpack-stats.dev.json'}),
    ],
    performance: {
        hints: false,
    },
    optimization: {
        moduleIds: 'named',
    }
};


这里是我目前的相关库(或者至少是我认为相关的库,如果需要,我肯定会发布任何其他库)

[email protected]
[email protected]
[email protected]


我认为导致问题的部分是插件,特别是HtmlWebpackPlugin:

plugins: [
*** I think the HtmlWebpackPlugin is causing the issue ***
        new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
        // Generates an `index.html` file with the <script> injected.
        new HtmlWebpackPlugin({
            // inject: true,
            template: paths.appHtml,
            hash: false,
        }),
...
    ],


有没有办法修复这个错误?我觉得我正确地调用了HtmlWebpackPlugin,但是我是不是很笨?

**更新1:**Inverting InterpolateHtmlPlugin和HtmlWebpackPlugin产生相同的错误
**更新2:**HtmlWebpackPlugin被确定为不是问题的原因,此时错误正在追溯到Webpack。
**更新3:**Git repo重新创建位于https://github.com/mexicantexan/webpack-error-reproduction的错误,并在以下链接中打开了一个问题:https://github.com/webpack/webpack/issues/14142
**更新4:**已解决。请查看下面的复选标记解决方案。

pgccezyw

pgccezyw1#

原来我们把BundleTracker放在了错误的地方。在配置文件中,我们把它从module.exports.resolve.plugins中删除了,应用程序就启动了。注意到它的alexander-akait!!

iyfamqjs

iyfamqjs2#

当我不小心将插件添加到resolve.plugins而不是plugins时,我看到了这个错误。

相关问题