未捕获的 ReferenceError: __webpack_require__ 未定义部署到服务器

时间:2021-06-04 17:31:02

标签: javascript npm webpack

我在登录我们的开发站点时收到此错误。这是我们从 .NET framework 4.5.2 迁移到 4.7.2 的一部分。虽然我认为这与它没有太大关系。如果我们直接从 VS 发布,页面加载正常。如果它使用我们的管道,或者我们没有事先清除我们的目录,我们会收到此错误(在控制台浏览器中)。

<块引用>

ie-polyfill_aurelia-bootstrapper:1 Uncaught ReferenceError: webpack_require 未定义 在 eval (即polyfill_aurelia-bootstrapper:1) 在 Object.0 (xxxAppScripts?v=sRzkW2d1FsbC87Brht0ZS8CXZDQaGBaky9ddApOJOaY1:1) 在 t (xxxAppScripts?v=sRzkW2d1FsbC87Brht0ZS8CXZDQaGBaky9ddApOJOaY1:1) 在 xxxAppScripts?v=sRzkW2d1FsbC87Brht0ZS8CXZDQaGBaky9ddApOJOaY1:1 在 xxxAppScripts?v=sRzkW2d1FsbC87Brht0ZS8CXZDQaGBaky9ddApOJOaY1:1

我们的构建过程应该和本地用NPM构建完全一样,构建过程没有报错。在 webpack.config.js 中为两者定义了 Build 如下

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const { ProvidePlugin, SourceMapDevToolPlugin } = require('webpack')
const { TsConfigPathsPlugin, CheckerPlugin } = require('awesome-typescript-loader');
const CleanWebpackPlugin = require('clean-webpack-plugin');
// config helpers:
const ensureArray = (config) => config && (Array.isArray(config) ? config : [config]) || []
const when = (condition, config, negativeConfig) =>
    condition ? ensureArray(config) : ensureArray(negativeConfig)
// primary config:
const title = 'XXXXXX';
const outDir = path.resolve(__dirname, 'Scripts', 'pub');
const srcDir = path.resolve(__dirname, 'App');
const nodeModulesDir = path.resolve(__dirname, 'node_modules');
const baseUrl = '/';
var isDevBuild = true;
var dev;

if (process.env.NODE_ENV) {
    dev = process.env.NODE_ENV.trim();
    if (dev === "production") {
        isDevBuild = true;
    }
}
const cssRules = [
    { loader: 'css-loader' },
    {
        loader: 'postcss-loader',
        options: { plugins: () => [require('autoprefixer')({ browsers: ['last 2 versions'] })] }
    },
    'sass-loader'
];

module.exports = ({ production, server, extractCss, coverage } = {}) => ({
    resolve: {
        extensions: ['.ts', '.js'],
        modules: [srcDir, 'node_modules'],
        plugins: [
            new TsConfigPathsPlugin(),
        ],
        alias: {
            // Enforce single aurelia-binding, to avoid v1/v2 duplication due to
            // out-of-date dependencies on 3rd party aurelia plugins
                        'aurelia-binding': path.resolve(__dirname, 'node_modules/aurelia-binding'),
                        'aurelia-bootstrapper': path.resolve(__dirname, 'node_modules/aurelia-bootstrapper')
        }
    },

    entry: {
        app: ['./ie-polyfill', 'aurelia-bootstrapper'],
        vendor: ['jquery'],
    },

    output: {
        path: outDir,
        publicPath: baseUrl,
        filename: production ? '[name].[chunkhash].bundle.js' : '[name].[hash].bundle.js',
        sourceMapFilename: production ? '[name].[chunkhash].bundle.map' : '[name].[hash].bundle.map',
        chunkFilename: production ? '[chunkhash].chunk.js' : '[hash].chunk.js',
    },
    devServer: {
        contentBase: baseUrl,
        // serve index.html for all 404 (required for push-state)
        historyApiFallback: '/',
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                issuer: [{ not: [{ test: /\.html$/i }] }],
                use: extractCss ? ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: cssRules,
                }) : ['style-loader', ...cssRules],
            },
            {
                test: /\.css$/i,
                issuer: [{ test: /\.html$/i }],
                // CSS required in templates cannot be extracted safely
                // because Aurelia would try to require it again in runtime
                use: cssRules,
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: ExtractTextPlugin.extract({
                    use: ['css-loader', 'sass-loader']
                })
            },
            { test: /\.html$/i, loader: 'html-loader' },

            { test: /\.ts$/i, loader: 'awesome-typescript-loader', exclude: nodeModulesDir },
            {
                test: require.resolve("jquery"),
                use: [
                    {
                        loader: "expose-loader",
                        options: "$"
                    }
                ]
            }
        ]
    },
    plugins: [


        new CleanWebpackPlugin(),

        // required polyfills for non-evergreen browsers
        new ProvidePlugin({
            Map: 'core-js/es6/map',
            WeakMap: 'core-js/es6/weak-map',
            Promise: 'core-js/es6/promise',
            regeneratorRuntime: 'regenerator-runtime' // to support await/async syntax
        }),
        new AureliaPlugin({
            aureliaApp: 'main'
        }),

        new ProvidePlugin({
            '$': 'jquery',
            'jQuery': 'jquery',
            'window.jQuery': 'jquery',
        }),

        new CheckerPlugin(),

        new ExtractTextPlugin({
            filename: production ? '[contenthash].css' : 'style-[id].css',
            allChunks: true,
        }),




    ].concat(isDevBuild ? [
        new SourceMapDevToolPlugin({
            filename: '[file].map', // Remove this line if you prefer inline source maps
            moduleFilenameTemplate: path.relative(outDir, '[resourcePath]')  // Point sourcemap entries to the original file locations on disk
        })
    ] : [
            new UglifyJsPlugin()
        ]),
})

似乎有人问过几次类似的问题,但没有有效的解决方案。感谢您提供的任何帮助。

0 个答案:

没有答案