一、 問題描述

在配置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發現成功了！ 有點納悶,距離上次安裝不過才幾天,就更新成

附上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

總結:

兩種解決方案:

1. 回退低版本

npm install -D [email protected] babel-core babel-preset-env

1. 更新到最高版本:

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