After upgrading the vue project to webpack4,run dev, report entrypoint = undefined?.

recently, there is a problem with the upgrade of webpack from 2 to 4 in the project. Finally, all the related dependencies have been updated to confirm that they can adapt to version 4.x, but there is an exception when packing. I have been watching it for almost two days, but I still haven"t found the problem.
Code:

entry: of 1.webpack

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
}

output: of 2.webpack

gp.getOutput = function () {
// entryoutput
  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
}

module of 3.webpack (this feeling is not important and can be roughly skipped):

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
}

plugin: of 4.webpack

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
}

part of the script code of 5.package.json:

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

this project has four entrances and generates four exits accordingly. Now the terminal will report

after 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>

print out the entry?


has been solved. Going directly to github to pick up issue, turns out to be a html-webpack-plugin version problem. I can just use v3.0.7 in my environment (it hurts to make a comeback after the plug-in webpack4, is upgraded to v4, but it should not affect the operation of the project, so I have to ignore it).

this just eliminates the problem of entrypoint = undefined. The packaged js generated by, npm run dev has been inserted into the page through html-webpack-plugin, but not executed, so now only static resources are successfully loaded into the page. But this is another problem, continue to study.

Front-end engineering and custom settings must be careful in order to dig fewer holes and liberate productivity.

Menu