Question

我正在阅读关于Webpack的教程：Github Webpack tutorial在这里，有一节关于用于生产和开发的config webpack。

这是开发配置：

// webpack.config.dev.js
module.exports = {
  devtool: 'cheap-eval-source-map',
  entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/dev-server',
    './src/index'
  ],

这是生产配置：

// webpack.config.prod.js
module.exports = {
  devtool: 'source-map',
  entry: ['./src/index'],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },

我理解devtool选项的区别。关于entry我不明白的事情。为什么在制作中，entry仅约为src/index，但在开发配置中，条目还包括webpack-dev-server

'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/dev-server',
    './src/index'

Answer 1

行'webpack-dev-server/client?http://localhost:8080'和'webpack/hot/dev-server'正在配置/定义将活动websocket附加到哪个端口，在本例中为localhost:8080，以及content base，在这种情况下是/client文件夹/路径webpack-dev-server。在生产环境中，您永远不会运行entry，因为捆绑的客户端资产（bundle.js或类似的）将由服务器（IIS，Node等）提供服务，这就是为什么{}中没有与webpack相关的项目的原因。 {1}}生产配置。

问题webpack-dev-server的Webpack插件不需要运行Webpack并编译您的JS源代码，它只是一个工具，可以在开发过程中用于监视更改和重新加载更改。

从技术上讲，开发中的entry数组属性可能只是'./src/index'，但是它不会启用webpack-dev-server和/或它的热模块重新加载。如果你想在没有这些配置项的情况下运行webpack-dev-server，那么你需要在启动webpack时添加命令行参数来指定端口和/或内容库。

希望这有帮助！

Answer 2

在理解之前，您应该了解以下两件事：

在Webpack the confusing part中链接时，有3种类型的条目：字符串 数组和对象。如上面的代码，即数组类型。条目数组的含义是：Webpack将所有这些javascript文件合并在一起。这通常是不必要的，因为Webpack足够智能，可以在处理时知道哪些javascript文件需要合并。您经常需要这样做以增强您不会在代码中的其他位置包含的不同JavaScript文件中的某些功能。
这很有点棘手＆＃34;部分。您看到webpack/hot/dev-server和webpack-dev-server/client?http://localhost:8080看起来像一个网址，而不是一些javascript文件，对吧？如果您检查项目目录，则会看到有这些文件：your_app_directory/node_modules/webpack/hot/dev-server.js和your_app_directory/node_modules/webpack-dev-server/client.js。这才是真正的意义：您从两个模块webpack-dev-server和webpack导入两个javascript文件。

再次回到您的webpack配置：

entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/dev-server',
    './src/index'
  ],

这意味着我们将三个不同的javascript文件合并为第2点，我已经想到了。正如我在第1点中解释的那样，您将这样做以增强某些功能。您包含文件webpack-dev-server/client.js，用于创建服务器以提供代码。您包含文件webpack/hot/dev-server.js以允许您的代码自动加载。当您在每次修改代码时没有启动/停止服务器的开发模式下，这非常有用。

Webpack：生产和开发环境之间的进入差异

2 个答案: