在 webpack 中创建多个块时，数组表示法和对象表示法有什么区别？

Question

我像这样在我的项目中启用了热重载功能

entry: [
    'webpack-hot-middleware/client',
    './src/js/entry.js'
],
output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
},

一切正常，直到我决定将供应商模块移动到不同的文件中，但它不起作用。然后我意识到用数组创建多个块（如前所述）在某种程度上不同于用对象表示法 llike this

entry: {
    hot: 'webpack-hot-middleware/client',
    app: './src/js/entry.js'
},
output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].bundle.js',
    publicPath: '/'
}

我在 index.html 中包含了 app.bundle.js 和 hot.bundle.js，但这仍然不起作用。知道为什么吗？

Answer 1

如果您只想指定几个块，您可以将热加载脚本添加到其中一个：

entry: {
    vandor: './vendor/vendor.js',
    app: ['webpack-hot-middleware/client', './src/js/entry.js']
},

如果你愿意，你可以动态地做：

entry: {
    vandor: ['./vendor/vendor.js'],
    app: ['./src/js/entry.js']
},
...
webpackConfig.entry.app.unshift('webpack-hot-middleware/client');

在 webpack 中创建多个块时，数组表示法和对象表示法有什么区别？

What is the difference between array notation and object notation when creating multiple chunks in webpack?

javascript

configuration

chunks

webpack

webpack-dev-server