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

项目踩过的坑"/>

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

问题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()]
}