Report to babel of undefined after webpack4.1 configuration is completed

webpack project upgrade version

configuration is as follows:

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 reported the following error when starting a project

clipboard.png

Please correct.

Feb.27,2021

try my loader:

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

query is the previous version. I don't know if I can use options, now. If not, you can try to create a .babelrc file in the root directory again. For details, please see Baidu

.

your command is "build2": "webpack-- config webpack.prod.js", then you post the configuration of webpack.common.js, and the error message is incomprehensible in. / src/xxx/index.js,


upgrade problems have been resolved!
first describe the projects to be upgraded

react and jquery combined projects

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

webpack version

 "webpack": "^1.13.1",
 

multiple entry files:

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

output to the specified js/ css/ img/ directory
require common components (lib/) without a file directory structure
that's all (let's not talk about file compression). Below are the problems encountered and solutions

1. The first thing you encounter is [babel of undefined]

.
 : babel-core babel-loaderbabel-preset-react      
       babel-preset-es2015  babel-preset-env 
 : 
 

2. Internal configuration of react original project

 
 react index.js 
    <Route path="/infoEdit" component={require("react-router!./infoEdit")}/>
     react-router!    npm run dev   index.js  Loader
    
 : react-router! ;
 

3, when plugins CSS output corresponds to 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    


it should be that the introduction of jquery under webpack4 leads to the invalidation of babel configuration

Menu