【前端】Webpack构建Vue项目踩过的坑

朱雀 2023-02-18 01:43 16阅读 0赞

**问题1：** Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

**解决方法：**  
webpack4.0以上用3.x extract-webpack-plugin 打包会不兼容，extract-webpack-plugin升级就可以了。

npm install --save-dev extract-text-webpack-plugin@4.0.0-beta.0

**问题2：** babel安装问题，Cannot find module ‘@babel/core’ babel-loader@8 requires Babel 7.x (the package '@babel/c

Cannot find module '@babel/core'
     babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.ou should install 'babel-loader@7'.

**解决方法**

*  原因：babel-loader和babel-core版本不对应造成的；
    
     *  babel-loader 8.x 对应 babel-core 7.x
     *  babel-loader 7.x 对应 babel-core 6.x

查看下自己的babel-loader和babel-core版本号是否对应,否则删除已经安装的对应的node包和相应配置，然后执行下面的命令（这里安装的是7.x的babel-loader），重新安装，即可解决：

npm install --save -dev babel-loader@7

**问题3：**  
./node\_modules/\_vue-loader@15.7.1@vue-loader/lib/index.js You may need an additional load…

ERROR in ./src/login.vue?vue&type=template&id=19e76240& 2:0
    Module parse failed: Unexpected token (2:0)
    File was processed with these loaders:
     * ./node_modules/_vue-loader@15.7.1@vue-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.

**解决方法**  
原因：Vue-loader在15.\*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的，所以我们要在这两个的基础上再去下载这个插件。

npm install --save-dev vue-loader-plugin

然后在配置文件（webpack.config.js）中要加上：

// webpack.config.js
    const VueLoaderPlugin = require('vue-loader/lib/plugin')
    
    module.exports = {
        
      // ...
      plugins: [
        new VueLoaderPlugin()
      ]
    }