当使用Webpack编译我的代码时，所有代码都会运行两次

Question

使用webpack-dev-server构建我的js捆绑包时，每次代码都会运行两次。不确定如何修复。

开发者工具控制台的截图

我的webpack配置：

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  devtool: 'cheap-eval-sourcemap',
  entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/dev-server',
    path.join(__dirname, '../src/main')
  ],
  output: {
    path: path.join(__dirname, '../dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, '../src/index.html')
    }),
    new CopyWebpackPlugin([
      {
        from: path.join(__dirname, '../assets'),
        to: path.join(__dirname, '../dist/assets')
      }
    ])
  ],
  devServer: {
    contentBase: path.join(__dirname, '../dist'),
    outputPath: '/lol',
    hot: true
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['babel-loader'],
        include: path.join(__dirname, '../src')
      }
    ]
  }
};

- Alex Cavazos

---

我已经看到了同样的行为一段时间了。感觉好像是在某个地方出现了回归。我没有看到配置中明显的错误，因为它与我使用的类似。如果您以内联模式运行开发服务器（inline: true + 删除那些与开发服务器相关的条目），则可以获得相同的行为。我想我们需要深入代码来解决这个问题。 - Juho Vepsäläinen

这可能与 https://stackoverflow.com/questions/37447858/webpack-adding-duplicates-of-runtime-into-bundle/37466820#37466820 相关。 - Juho Vepsäläinen

Answer 1

在模板文件中，您可能手动添加了一个加载包的代码。

如果您没有该

inject: false 

在中的选项

new HtmlWebpackPlugin({
    template: path.join(__dirname, '../src/index.html')
}),

包将再次被添加。

- Emil Perhinschi

---

这个可行！不再有双重初始化！唯一的问题是当“inject: false”时，我看到了样式变化。你知道为什么会这样吗？ - zero_cool

当样式改变时，可能是因为加载两次时CSS声明互相干扰了？ - Emil Perhinschi

这个方法是有效的，但也许更直接的做法是移除模板中的 <script src="index.js"></script> 标签，因为这可能是双重引用的原因。 - ggorlen

请注意，如果您正在使用Webpack（从头开始）与React，则还必须从index.js中删除<React.StrictMode>。 - Naveen

Answer 2

稍微扩展一下@Emil Perhinschi和@ggloren之前的回复...

或者，如果您的../src/index.html文件除了<script src="bundle.js"></script>之外不依赖于任何脚本，则只需从index.html中删除后者。

根据https://github.com/jantimon/html-webpack-plugin，inject的默认值为true，并且...

当传递true或'body'时，所有JavaScript资源都将放置在body元素的底部。

因此，您的两个bundle.js实例是：

1. 您（可能）编写的<script src="bundle.js"></script>，以及
2. HtmlWebpackPlugin在“body元素底部”注入的实例。

- Ken Lin