webpack4.1配置完成后報 babel of undefined

webpack項目升級版本

配置如下：

webpack.json

 "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "watch": "webpack --watch",
    "start": "webpack-dev-server --open --config webpack.dev.js",
    "build2": "webpack --config webpack.prod.js"
  },
  
 "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-react": "^6.11.1",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.10",
    "file-loader": "^1.1.11",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.0.6",
    ....

webpack.common.js


    module: {
        rules: [
            .... 此處省略其他loader
            {   
                // test: /\.(js|jsx)$/,
                test: /\.jsx?$/,
                exclude: /(node_modules)/,
                loader:'babel-loader',
                query:{
                    presets: ['babel-preset-es2015', 'babel-preset-react']
                    // presets:[
                    //     require.resolve('babel-preset-es2015'),
                    //     require.resolve('babel-preset-react')
                    // ]
                }
            }
        ]
    },

npm run build2 啟動項目時報以下錯誤

請指正....

回答

編輯回答

乞許

你命令是"build2": "webpack --config webpack.prod.js"，然后你貼的是webpack.common.js的配置，錯誤信息是在./src/xxx/index.js,理解不能

2018年5月28日 01:32

編輯回答

毀與悔

升級問題都已經(jīng)解決！
先再描述下待升級的項目

react 和 jquery 組合項目

   "react": "15.2.1",
   "jquery": "^1.12.4",

webpack 版本

 "webpack": "^1.13.1",

多入口文件：

   entry: entryFormat(require("./page")),
   var entryFormat = (p) => {
          var _p = {};p.map(function(item){_p[item] = "./src/" + item;});return _p;
   }

輸出到指定的 js/ css/ img/ 目錄下面
require 公共組件(lib/)不用帶文件目錄結(jié)構(gòu)
基本的就這么多了(文件壓縮那些就不說了) 下面來說下遇到的問題和解決方法

1、最開始遇到的也就是 [ babel of undefined ]

 原因： babel-core 、babel-loader、babel-preset-react 未升級到最新版本     
       babel-preset-es2015 被 babel-preset-env 所替代，
 解決方法：更換到最新版本 即可

2、react原有項目內(nèi)部配置問題

 
 react 的項目入口文件index.js 
    <Route path="/infoEdit" component={require("react-router!./infoEdit")}/>
    中 react-router!  寫法 導(dǎo)致 npm run dev 的時候一直報  index.js 不是一個 Loader
    
 解決方法：刪除 react-router! 即可；

3、plugins CSS 輸出對應(yīng) css/ 時

 Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
 
 原因： 插件 extract-text-webpack-plugin 未及時 升級；
 解決： cnpm install extract-text-webpack-plugin@next 
       具體的解決思路 請看 https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/701   （我還未沒看懂）

2018年5月10日 21:30

編輯回答

爆扎

試一下我這個loader：

{
            test: /\.(js|jsx|mjs)$/,
            include: paths.appSrc,
            loader: require.resolve('babel-loader'),
            options: {
              compact: true,
              presets: ['es2015', 'react','stage-0']
            },
          //   query: {
              
          //  }
          },

query是之前的版本，現(xiàn)在改用options，我也不知道行不行，不行的話你可以再試試在根目錄創(chuàng)建.babelrc文件，具體細(xì)節(jié)請百度

2018年8月28日 06:22