vendors.js:未定义的TypeError:在使用webpack时不能读取未定义的属性“应用”

Question

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

所有操作都很好，直到重新加载2个热模块，然后构建会因错误而中断。

vendors.js:未定义的TypeError:在使用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回购中读到的一些答案：

删除CommonsChunkPlugin。然而，束的大小增加。

或

添加缓存: false

或

在开发过程中删除dedupe插件

目前，这是唯一的解决办法。希望webpack尽快解决这个问题。

Webpack 959期

Answer 2

最近，我遇到了这个问题，并通过将chunksSortMode: 'dependency',添加到我的HtmlWebpackPlugin配置中来修复它。我不清楚它为什么会起作用，但很明显，在块状的过程中，有些东西是不正常的。加上这增加了我的构建时间，但它解决了这个问题，所以我将接受它。

在您的示例中，您的HtmlWebpackPlugin看起来如下所示：

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