整理 vue webpack  npm run dev(build)时 出现的各种错误

 

1.listen EADDRINUSE 0.0.0.0:8000

      操作系统是 windows  貌似是 8000端口被占用了 我改成9999 就好了

if (isDev) {
    config.devServer = {
        port: 8888,
        host: '0.0.0.0',
        overlay: {
            errors: true,
        },
    //    hot:true
    }
}

2 ERRORin./src/app.vuevue&type=style&index=0&id=5ef48958&lang=stylus&scoped=true& (./node_modules/vue-loader/lib??vue-loader-options!./src/app.vue?vue&type=style&index=0&id=5ef48958&lang=stylus&scoped=true&) 14:0
Module parse failed: Unexpected character '#' (14:0)
You may need an appropriate loader to handle this file type.(大概意思就是 不支持#号 需要让我支持下stylus这个文件类型)

<style lang='stylus' scoped>
#app {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#cover {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #555;
  opacity: 0.5;
  z-index: -1;
}
</style>

{
            test: /\.styl$/,
            use: [
                'style-loader',
                'css-loader',
                {
                    loader: 'postcss-loader',
                    options: {
                        sourceMap: true
                    }
                },
                'stylus-loader'
            ]
        }

 

错误原因:  test:/\.styl$/ 貌似是正则匹配得不对  我把$ 删了之后 就没有报错了

修改: test:/\.styl/

吐槽: 坑坑坑坑

 

3  Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

错误原因 : webpack用的是4以上版本 而 extract-text-webpack-plugin使用得是3版本

解决办法 : npm i extract-text-webpack-plugin@next (就是升级带beta版本 + extract-text-webpack-plugin@4.0.0-beta.0)

吐槽: 学习视频是 https://www.imooc.com/learn/935  里面webpack是3.0  目前版本4.0 所以有很多坑...

4 Error: Path variable [contentHash:8] not implemented in this context: styles.[contentHash:8].css  (contentHash:8 在上下文不执行???)

错误原因:webpack4版本以上打包css不支持contentHash

解决办法 : 把contentHash 换成 chunkHash了 并未找到具体解决办法

ps :  参考地址 https://blog.csdn.net/weixin_40814356/article/details/80625747

5 webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead. (webpack.optimize.CommonsChunkPlugin被移除了)

错误原因:webpack4版本以上 把 webpack.optimize.CommonsChunkPlugin 这个类移除了 换成了splitChunks 

解决办法:  (抄的)

 config.plugins.push(
        new ExtractPlugin('styles.[chunkHash:8].css'),
    )
    config.optimization = {
        splitChunks: {
          cacheGroups: {
            commons: {
              chunks: 'initial',
              minChunks: 2,
              maxInitialRequests: 5,
              minSize: 0
            },
            vendor: {
              test: /node_modules/,
              chunks: 'initial',
              name: 'vendor',
              priority: 10,
              enforce: true
            }
          }
        },
        runtimeChunk: true
      }

ps 学习视频评论下边 webpack 更新 翻译地址 http://ju.outofmemory.cn/entry/343762

6  Failed to mount component: template or render function not defined

错误原因: 大概是因为运行时 无法编译template模板 

解决办法:

 1.查看资料大概 都是这么改的,更改下 webpack.config.js

​

module.exports = {
    ...
    resolve: {
        extensions: ['.js'],
        alias: {
            'vue': 'vue/dist/vue.common.js'
        }
    },
    ...
}

[点击并拖拽以移动]
​

  2 或者再 require 后面加default

{
      path: '/member/',
      component: member,
      children: [
        {
          path: '',
          name: 'memberHome',
          component: require('@components/member/member').default
        },
        {
          path: 'test',
          name: 'memberTest',
          component: require('@/pages/member/components/test').default
        }
      ]
    }