Question

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

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

而中断

vendors.js：未捕获TypeError：无法读取属性'apply' 使用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',
  }
};

我找不到这个bug。我还清除了我的浏览器缓存并删除了所有cookie但无济于事。

我还检查了vendor.js文件。它已经缩小了，但我可以看到它打破了热模块重载功能。任何帮助将非常感激。感谢您的期待。

Answer 1

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

删除CommonsChunkPlugin。但是，捆绑尺寸会增加。

OR

添加缓存：false

OR

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

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

Webpack Issue 959

Answer 2

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

在您的情况下，您的HtmlWebpackPlugin看起来会像这样：

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

vendors.js：未捕获的TypeError：使用webpack时无法读取未定义的属性“apply”

2 个答案: