vue项目升级到webpack4，run dev后报entrypoint = undefined？

Question

最近在捣鼓项目webpack从2升到4的问题，好不容易所有相关依赖都已经更新过确认是可以适应4.x版本的了，最后打包的时候却出现了异常，已经看了快两天了，还是没有找出问题所在。
上代码：

1.webpack的entry：

gp.getEntry = function () {
  var isDev = this.isDev()
  var entry = {}
  var chunks = []
// 动态生成entry对象
  if (isDev) {
    const port = this.getPort()
    glob.sync('./src/entry/**/*.js').forEach(path => {
      const chunk = path.split('./src/entry/')[1].split('.js')[0]
      entry[chunk] = ['babel-polyfill', `webpack-hot-middleware/client?timeout=20000&reload=true`, path]
      chunks.push(chunk)
    })
  } else {
    glob.sync('./src/entry/**/*.js').forEach(path => {
      const chunk = 'src/' + path.split('./src/entry/')[1].split('.js')[0]
      entry[chunk] = ['babel-polyfill', path]
      chunks.push(chunk)
    })
  }

  this.entry = entry
  this.chunks = chunks
}

2.webpack的output：

gp.getOutput = function () {
// 根据entry对象动态生成output对象
  const publicPath = this._userConfig.static.srcHost
  const path = resolve(this.root_path, './dist')
  var res = {
    path,
    filename: '[name].js',
    chunkFilename: '[name].[chunkHash:7].js',
    publicPath
  }

  this.output = res
}

3.webpack的module（这段感觉并不重要，可以粗略跳过）：

gp.getModule = function () {
  var res = {
    rules: [
      {
        enforce: 'pre',
        test: /\.vue$/,
        loader: 'eslint-loader',
        exclude: /node_modules/
      },
      {
        test: /\.vue$/,
        use: {
          loader: 'vue-loader',
          options: {
            loaders: {
              'scss': [
                'css-loader',
                'sass-loader'
              ]
            }
          }
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [['es2015', { 'modules': false }]]
            }
          },
          {
            loader: 'eslint-loader',
            options: {
              query: {
                cacheDirectory: true
              }
            }
          }
        ]
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      },
      {
        test: /\.less$/,
        use: ExtractTextPlugin.extract({
          use: [{
            loader: 'css-loader'
          }, {
            loader: 'less-loader'
          }],
          fallback: 'style-loader'
        })
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          use: [{
            loader: 'css-loader'
          }, {
            loader: 'sass-loader'
          }],
          fallback: 'style-loader'
        })
      },
      {
        test: /\.stylus/,
        use: ExtractTextPlugin.extract({
          use: [{
            loader: 'css-loader'
          }, {
            loader: 'stylus-loader'
          }],
          fallback: 'style-loader'
        })
      },
      {
        test: /\.html$/,
        use: [{
          loader: 'html-loader',
          options: {
            root: resolve(__dirname, 'src'),
            attrs: ['img:src', 'link:href']
          }
        }]
      },
      {
        test: /\.ejs/,
        use: [{
          loader: 'ejs-loader',
          options: {
            root: resolve(__dirname, 'src'),
            attrs: ['img:src', 'link:href']
          }
        }]
      },
      {
        test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
        exclude: /favicon\.png$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }]
      }
    ]
  }

  this.module = res
}

4.webpack的plugin：

gp.getPlugins = function () {
  var chunks = this.chunks
  var isDev = this.isDev()

  var res = [
    new webpack.optimize.SplitChunksPlugin({
    // 这是webpack4新增的特性
      chunks: "initial", // 必须三选一： "initial" | "all"(默认就是all) | "async" 
      minSize: 0, // 最小尺寸，默认0
      minChunks: 1, // 最小 chunk ，默认1
      maxAsyncRequests: 5, // 最大异步请求数， 默认1
      maxInitialRequests : 3, // 最大初始化请求书，默认1
      name: function(){}, // 名称，此选项可接收 function
      cacheGroups:{ // 这里开始设置缓存的 chunks
          priority: 0, // 缓存组优先级
          vendor: { // key 为entry中定义的 入口名称
              chunks: "initial", // 必须三选一： "initial" | "all" | "async"(默认就是异步) 
              test: /node_modules/, // 正则规则验证，如果符合就提取 chunk
              name: "vendors", // 要缓存的 分隔出来的 chunk 名称 
              filename: 'assets/js/vendors.js',
              enforce: true,
              reuseExistingChunk: true // 可设置是否重用该chunk（查看源码没有发现默认值）
          }
      }
    }),
    new ExtractTextPlugin({
      filename: 'assets/css/[name].css',
      allChunks: false,
      disable: isDev
    }),
    new webpack.DefinePlugin({
      'appConfig': JSON.stringify(getAppConfig()[this.opts['NODE_ENV']]),
      'window.appConfig': JSON.stringify(getAppConfig()[this.opts['NODE_ENV']]),
      'process.env': {
        NODE_ENV: isDev ? '"development"' : '"production"'
      }
    }),
    new CopyWebpackPlugin([{
      from: './src/utils/ie-test.js',
      to: '.'
    }])
  ]
// 这里是动态生成HtmlWebpackPlugin配置
  glob.sync('./src/entry/**/*.ejs').forEach(path => {
    const filename = path.split('./src/entry/')[1].split('/app.ejs')[0] + '.html'
    let chunk = path.split('./src/entry/')[1].split('.ejs')[0]
    chunk = this.isDev() ? chunk : ('src/' + chunk)
    const htmlConf = {
      filename: filename,
      template: path,
      inject: 'body',
      favicon: './src/assets/img/favicon.ico',
      hash: !isDev,
      isProd: this.isProd(),
      showErrors: true,
      iconfontUrl: '//at.alicdn.com/t/font_670822_9wmnctcouh9.css'
    }
    res.push(new HtmlWebpackPlugin(htmlConf))
  })

  this.plugins = res
}

5.package.json的部分script代码：

  "scripts": {
    "dev": "node --harmony ./webpack/server.js"
  }

这个项目有四个入口，并对应生成四个出口。现在run dev后终端会报

 Entrypoint undefined = customer_index1.html
Entrypoint undefined = customer_index2.html
Entrypoint undefined = customer_index3.html
Entrypoint undefined = customer_index4.html```

本地localhost打开，不报错，页面空白，页面元素只有<div id="app"></div>，没有继续往下请求资源。

Answer 1

已经解决了，直接去github上面扒issue，原来是html-webpack-plugin版本问题，我的环境下用v3.0.7就可以了（蛋疼的是为了更好地兼容webpack4，这个插件升级到v4后这个问题又卷土重来，但是应该不影响项目运行的，只好忽略）。

这只是消除了entrypoint = undefined的问题，npm run dev后打包生成的js已经通过html-webpack-plugin插入页面，却没有执行，因此现在页面只有静态资源被成功加载到。不过这是另一个问题了，继续研究。

前端工程化和自定义设置一定要谨慎，才能少挖点坑，解放生产力。

Answer 2

把 entry 打印出来看看？