webpack.config.js配置遇到Error: Cannot find module '@babel/core'问题

2024-05-16 22:40:07

一、问题描述

在配置webpack.config.js自动打包的时候,出现Error: Cannot find module '@babel/core'错误
最初以为是babel-core没有安装上。重装了好几遍babel-core还是不行。对照以前的项目,发现babel-loader的版本不一样,之前的是@7.1.5版本,而现在是@8.0.0版本。

二、解决方法

带着半信半疑的心情安装回@7.1.5版本

npm uninstall babel-loader
npm install babel-loader@7.1.5

再npm run build发现成功了！
有点纳闷,距离上次安装不过才几天,就更新成babel-loader@8.0.0。而且还不支持原来的配置了。网上没有找到方法解决,原理也还不清楚。先mark一下,以后解决了@8.0.0的这个问题再回来补充。

附上webpack.config.js代码:

var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: __dirname + '/client/root/index', //入口文件
    output: {path: path.join(__dirname + '/dist'),filename: 'bundle.js',  //打包后文件名
    },module: {loaders : [{test :/(\.jsx|\.js)$/,exclude : /node_modules/,loader :'babel-loader',options:{presets:["env", "react", ]}},{test: /\.css$/,loader: 'style-loader!css-loader'},{test: /\.less$/,loader: 'style-loader!css-loader!less-loader'},{test: /\.(jpg|.png)$/,loader: 'url-loader'}]},plugins: [//打包引用模板new HtmlWebpackPlugin({template: __dirname + '/client/views/template.html'}),]
}

关于babel-loader@8.0.0出现错误原因已经找到
(忘了去看官方文档了)

官方默认babel-loader | babel 对应的版本需要一致: 即babel-loader需要搭配最新版本babel

具体请参考:《npm_babel-loader》

总结:

两种解决方案:

回退低版本

npm install -D babel-loader@7 babel-core babel-preset-env

更新到最高版本:

npm install -D babel-loader @babel/core @babel/preset-env webpack

转载于:https://www.cnblogs.com/Joe-and-Joan/p/10157060.html

webpack.config.js配置遇到Error: Cannot find module '@babel/core'问题相关推荐

webpack之webpack.config.js配置
webpack之webpack.config.js配置 wbepack.config.js webpack的配置文件详解: 作用: 指示 webpack 干那些活(当你运行 webpack 指令时 ...
react中webpack.config.js配置lessless-loader less
这是我第一次配置这些,没有学过webpack,出过很错,还好后来都一一改正.我觉得我遇到的大部分问题就是版本更新了,和老师教的时候用的有一些不一样,但是我想尽量不要去直接将那些包的版本降低,最好还是使 ...
基本webpack.config.js配置和packag.json配置
创建webpack.config.js文件在根目录下,visual 可以自动生成,这里是手写,可能不全我是初学者, 在webpack.config.js中在终端下载包输入 npm init 在 p ...
vue-cli的webpack模版，相关配置文件dev-server.js与webpack.config.js配置解析
1.下载vue-cli [html] view plain copy npm install vue-cli -g vue-cli的使用与详细介绍,可以到github上获取https://github ...
Error: Cannot find module '@babel/core'
官方默认babel-loader需要搭配最新版本babel 更新到最高版本: npm install -D babel-loader @babel/core @babel/preset-env web ...
vue.js多页面开发 webpack.config.js 配置方式
配置文件代码 var path = require('path') var webpack = require('webpack') var glob = require('glob'); 复制代码 ...
webpack 3 零基础入门教程 #4 - webpack 的配置文件 webpack.config.js
在命令行中运行 webpack 命令确实可以实现 webpack 的功能,但是我们一般不这么做,我们要用配置文件来处理. 我们把之前学到的知识用 webpack 的配置文件来实现,配置文件的名字叫 w ...
webpack配置：less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件...
一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm inst ...
Failed to load ‘D:\webpack.config.js‘ config Error: Cannot find module ‘webpack//libRequestShortener
webpack打包报以下错误在webpack.config.js中使用了plugins 然后使用webpack打包报以下错误解决方案更换package.json的name(任意取) 然后将本地的 ...

最新文章

热门文章