鍍金池/ 問答/C++  HTML/ vue項目升級到webpack4,run dev后報entrypoint = u

vue項目升級到webpack4,run dev后報entrypoint = undefined?

最近在搗鼓項目webpack從2升到4的問題,好不容易所有相關(guān)依賴都已經(jīng)更新過確認是可以適應4.x版本的了,最后打包的時候卻出現(xiàn)了異常,已經(jīng)看了快兩天了,還是沒有找出問題所在。
上代碼:

1.webpack的entry:

gp.getEntry = function () {
  var isDev = this.isDev()
  var entry = {}
  var chunks = []
// 動態(tài)生成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 () {
// 根據(jù)entry對象動態(tài)生成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, // 最大異步請求數(shù), 默認1
      maxInitialRequests : 3, // 最大初始化請求書,默認1
      name: function(){}, // 名稱,此選項可接收 function
      cacheGroups:{ // 這里開始設置緩存的 chunks
          priority: 0, // 緩存組優(yōu)先級
          vendor: { // key 為entry中定義的 入口名稱
              chunks: "initial", // 必須三選一: "initial" | "all" | "async"(默認就是異步) 
              test: /node_modules/, // 正則規(guī)則驗證,如果符合就提取 chunk
              name: "vendors", // 要緩存的 分隔出來的 chunk 名稱 
              filename: 'assets/js/vendors.js',
              enforce: true,
              reuseExistingChunk: true // 可設置是否重用該chunk(查看源碼沒有發(fā)現(xiàn)默認值)
          }
      }
    }),
    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: '.'
    }])
  ]
// 這里是動態(tài)生成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"
  }

這個項目有四個入口,并對應生成四個出口?,F(xiàn)在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>,沒有繼續(xù)往下請求資源。
回答
編輯回答
喵小咪

已經(jīng)解決了,直接去github上面扒issue,原來是html-webpack-plugin版本問題,我的環(huán)境下用v3.0.7就可以了(蛋疼的是為了更好地兼容webpack4,這個插件升級到v4后這個問題又卷土重來,但是應該不影響項目運行的,只好忽略)。

這只是消除了entrypoint = undefined的問題,npm run dev后打包生成的js已經(jīng)通過html-webpack-plugin插入頁面,卻沒有執(zhí)行,因此現(xiàn)在頁面只有靜態(tài)資源被成功加載到。不過這是另一個問題了,繼續(xù)研究。

前端工程化和自定義設置一定要謹慎,才能少挖點坑,解放生產(chǎn)力。

2017年3月4日 23:34
編輯回答
懷中人

把 entry 打印出來看看?

2018年9月3日 10:35