vendor.js：未捕获的类型错误：使用 webpack 时无法读取未定义的属性“应用”

Question

这发生在热模块重新加载或刷新时。不知道为什么会这样。我必须重新启动构建过程才能再次引导应用程序。

一切正常，直到 2 个热模块重新加载，然后构建因错误而中断

vendors.js：未捕获的类型错误：无法读取属性“应用”的 使用 webpack 时未定义

下面是我的配置文件：

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var VendorChunkPlugin = require('webpack-vendor-chunk-plugin');
module.exports = {
  'devtool': 'eval-source-map',

  'entry': {
    'vendor': [
      'react',
      'react-dom',
      'react-router',
      'react-redux',
      'redux-thunk',
      'react-bootstrap',
      'redux',
      'redux-form',
      'axios'
    ],
    'app':  __dirname + '/src/main.js'
  },
  'output': {
    'path': __dirname + '/build',
    'publicPath': '/',
    'chunkFilename': '[id].[name].chunk.js',
    'filename': '[name].[hash].js'
  },

  'module': {
    'loaders': [
      // JSX and JS transpilation using babel
      {
        'test': [/\.js$/, /\.jsx$/],
        'exclude': /(node_modules|bower_components)/,
        'loader': 'babel'
      },
      // SASS modularization using style, css and postcss sass loader
      {
        'test': [/\.css$/, /\.scss$/],
        'loader': 'style!css!sass'
      },
      // Font path loader
      {
        'test': /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        'loader': 'file-loader?name=fonts/[name].[ext]'
      },
      // Image path loader
      {
        'test': /\.(jpe?g|png|gif|svg)$/i,
        'loaders': [
          'url-loader?limit=15000&name=images/[name].[ext]',
          'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
      }
    ],
  },

  'sassLoader': {
    'includePaths': [
      path.resolve(__dirname, 'src/components/'),
      path.resolve(__dirname, 'src/components/common/assets/')
    ]
  },

  'resolve': {
    'root': [
      path.resolve(__dirname, 'src'),
      path.resolve(__dirname, 'src/components/common/assets/'),
      path.resolve(__dirname, 'src/components/common/'),
      path.resolve(__dirname, 'node_modules')
    ],
    'extensions': ['', '.js', '.jsx', '.scss'],
  },

  'plugins': [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.BannerPlugin("App has been developed by Company."),
    new HtmlWebpackPlugin({
      'template': __dirname + '/src/index.tmpl.html'
    }),
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendors.js', Infinity),
    new VendorChunkPlugin('vendor'),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      'minimize': true,
      'screw-ie8': true,
      'mangle': false,
      'compress': {
        'warnings': false
      },
      'output': {
        'comments': false,
        'semicolons': true,
      }
    }),
    new webpack.optimize.DedupePlugin()
  ],

  'devServer': {
    'contentBase': './build',
    'host': '0.0.0.0',
    'https': true,
    'colors': true,
    'compress': true,
    'hot': true,
    'historyApiFallback': true,
    'inline': true,
    // Display only errors to reduce the amount of output.
    'stats': 'errors-only',
  }
};

我找不到太多关于这个错误的信息。我还清除了浏览器缓存并删除了所有 cookie，但无济于事。

我还检查了 vendor.js 文件。它被缩小了，但我可以看到它在热模块重新加载功能上中断。任何帮助将非常感激。感谢期待。

Answer 1

这些是一些答案，我从 webpack 的 github repo 中读到的：

删除 CommonsChunkPlugin。但是，捆绑包的大小会增加。

或

添加缓存：false

或

在开发过程中删除重复数据删除插件

目前，这是唯一的解决方案。让我们希望 webpack 尽快解决这个问题。

Webpack Issue 959

Answer 2

我最近遇到了这个问题，并通过将chunksSortMode: 'dependency', 添加到我的HtmlWebpackPlugin 配置来解决它。我不确定为什么它确实有效，但显然在分块过程中出现了问题。添加这增加了我的构建时间，但它解决了问题，所以我会接受它。

在您的情况下，您的 HtmlWebpackPlugin 将看起来像这样更改：

new HtmlWebpackPlugin({
      chunksSortMode: 'dependency',
      'template': __dirname + '/src/index.tmpl.html'
    }),