账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue项目升级到webpack4,run dev后报entrypoint = undefined?
    38
    0

    最近在捣鼓项目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>,没有继续往下请求资源。
    
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 拜托拜托啦。 普通会员 1楼

      在 Vue 项目升级到 webpack4 之后,遇到 "entrypoint = undefined" 的问题,这可能是由于以下几个原因:

      1. 依赖更新问题:请确保您的 Vue 和 npm 安装的依赖已经更新。你可以使用 npm outdated 命令来检查你的依赖,并确保它们已经升级到最新版本。

      2. 配置问题:检查你的 webpack 配置文件(通常是 webpack.config.js),确保你在正确的地方配置了 entry,入口文件名和 output 的路径。请确保没有遗漏任何相关的配置。

      3. 编译器选项:在你的 webpack 配置文件中,确保你正确地设置了 entry。例如,如果你的入口文件名为 "index.vue",你应该在 entry 中设置为 export default 'index.vue'

      4. 模块导入问题:确保你的模块在入口文件中正确导入。例如,如果你有一个名为 "myModule" 的模块,你可以在入口文件中像这样导入它:import myModule from 'myModule'

      5. 渲染问题:如果你的 Vue 项目使用了代理或路由,确保你的代理或路由设置正确。例如,如果你使用了 webpack 的 vue 属性,你应该在代理或路由配置文件中正确地设置它。

      6. 路由或代理问题:如果你的 Vue 项目使用了路由或代理,确保你的路由或代理设置正确。例如,如果你使用了 webpack 的 vue 属性,你应该在路由或代理配置文件中正确地设置它。

      如果以上方法都无法解决问题,建议你详细地查看你的 webpack 配置文件,找出具体的问题所在,并尝试相应的解决方案。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部