Question

有一个问题，并且无法以任何方式找到解决方案，因为很长一段时间直接我没有处理webpack设置。

用户的错误来自我在React上编写的小部件连接的门户网站。例如，我的一些用户收到此错误：

{
  "message": "Loading chunk 0 failed.",
  "stack": "Error: Loading chunk 0 failed.\n    at HTMLScriptElement.n (http://<url>/widget/media/index.js:2:500)"
}

或

    {
      "message": "Loading chunk 1 failed.",
      "stack": "Error: Loading chunk 0 failed.\n    at HTMLScriptElement.n (http://<url>/widget/media/index.js:2:500)"
    }

生产它在这样的链上更新：在服务器的开头，build：prod命令在这里包装＆＃34; build：prod＆＃34;推出：＆＃34; npm run lint＆amp; ＆安培; npm test＆amp; ＆安培; webpack - config webpack.config.prod.js＆＃34; ，然后 webpack.config.prod.js ，在这里这样的代码

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const pkg = require('./package.json');

module.exports = {
    entry: {
        index: path.join(__dirname, 'src', 'index.js')
    },

    output: {
        path: path.join(__dirname, 'build'),
        filename: '[name].js',
        chunkFilename: '[name].js',
        publicPath: '/widget/media/'
    },

    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.(png|jpg)$/,
                use: 'file-loader?name=img/[name].[ext]'
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: false,
                                modules: true,
                                minimize: true,
                                localIdentName: '[hash:base64:7]'
                            }
                        },
                        'postcss-loader'
                    ]
                })
            }
        ]
    },

    plugins: [
        new ExtractTextPlugin('styles.css'),
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            compress: { warnings: false },
            comments: false
        }),
        new webpack.BannerPlugin(`${pkg.name}-${new Date()}. RELEASE.`),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('production')
            },
            PROJECT_ENV: JSON.stringify('production')
        })
    ]
};

在index.js文件中，在src文件夹中指定为我的入口索引这样的代码

import 'babel-polyfill';
import datasetPolyfill from 'element-dataset';
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import Orders, { initAction } from './features/orders';
import Returns, { initAction as returnInit } from './features/returns';

datasetPolyfill();

const features = {
    orders: {
        root: Orders,
        init: initAction
    },
    returns: {
        root: Returns,
        init: returnInit
    }
};

const containers = Array.from(document.querySelectorAll('[data-feature]'));

containers.forEach(container => {
    const Feature = features[container.dataset.feature];

    if (Feature) {
        store.dispatch(Feature.init(JSON.parse(container.dataset.state)));

        render(
            <Provider store={store}>
                <Feature.root />
            </Provider>,
            container
        );
    }
});

在这段代码中，我找到了专家的所有功能。此外，在导入订单文件中，{initAction}来自＆＃39; ./ features / orders＆＃39; 在这里给我这样的代码

import errorAction from 'rossko-orders/lib/actions/error';
import AsyncComponent from '../../components/async-wrap';

function importFunc() {
    return import(/* webpackChunkName: "orders" */ 'rossko-orders');
}

export initAction from 'rossko-orders/lib/actions/init';
export default AsyncComponent(importFunc, errorAction);

同样的代码（返回而不是订单） import返回，{initAction as returnInit}来自＆＃39; ./ features / returns＆＃39 ;;

判断错误发生了什么，不是所有用户，而只是某些部分。此外，围绕此类错误的测试通常不会。

UPD：起初我认为是因为某些用户拥有旧浏览器（例如IE）。但正如展示更深入的分析，错误也出现在现代浏览器上。例如：

Headers: Cache-Control: no-cache; Connection: close; Pragma: no-cache; Content-Type: application/json; Accept: application/json, text/plain, */*; Accept-Encoding: gzip, deflate, br; Accept-Language: ru,en;q=0.8; Cookie: ym_uid=149837534368628556; ga=GA1.2.1338437862.1512111490; _gid=GA1.2.386643296.1513581524; Host: returns; Referer: http://< url >/personal/orders/; User-Agent: Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.137 YaBrowser/17.4.1.1026 Yowser/2.5 Safari/537.36; Origin: http://< url >; Content-Length: 162; Authorization-Domain: http://< url >; Authorization-Session: < session >.
{
  "message": "Loading chunk 0 failed.",
  "stack": "Error: Loading chunk 0 failed.\n    at HTMLScriptElement.n (http://< url >/widget/media/index.js?:2:500)"
}

我不知道如何解决这个问题。任何帮助都将非常有价值。 THX。

Webpack - 某些用户加载块0或1失败

0 个答案: