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

Question

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 启动项目时 报以下 错误

请指正....

Answer 1

升级问题 都已经解决！
先再描述下待升级的项目

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/)不用带 文件目录结构
基本的就这么多了(文件压缩那些就不说了) 下面来说下 遇到的问题和 解决方法

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

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

2、react原有项目内部配置问题

 
 react 的项目入口文件index.js 
    <Route path="/infoEdit" component={require("react-router!./infoEdit")}/>
    中 react-router!  写法 导致 npm run dev 的时候一直报  index.js 不是一个 Loader
    
 解决方法：删除 react-router! 即可；
 

3、plugins CSS 输出对应 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   （我还未没看懂） 

Answer 2

试一下我这个loader：

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

query是之前的版本，现在改用options，我也不知道行不行，不行的话你可以再试试在根目录创建.babelrc文件，具体细节请百度

Answer 3

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

Answer 4

应该是webpack4 下引入jquery 导致babel 配置失效