webpack.config.js配置遇到Error: Cannot find module '@babel/core'&&Cannot find module '@babel/plugin-transform-react-jsx' 問題
阿新 • • 發佈:2019-02-24
解決 描述 tar exclude 最新版 兩種 alt path set
下文是網上找到的方法,是因為版本沖突的原因,參照後安裝7版本解決
cnpm install -D babel-loader@7 babel-core babel-preset-env
一、 問題描述
在配置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
發現成功了!
有點納悶,距離上次安裝不過才幾天,就更新成[email protected]。而且還不支持原來的配置了。網上沒有找到方法解決,原理也還不清楚。先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‘
}),
]
}
關於[email protected]
出現錯誤原因已經找到,感謝@Sky__zt的回答.
(忘了去看官方文檔了)
官方默認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
webpack.config.js配置遇到Error: Cannot find module '@babel/core'&&Cannot find module '@babel/plugin-transform-react-jsx' 問題