babel 7.x 结合 webpack 4.x 配置

package.json

  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.2.3",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.2.3",
    "babel-loader": "8.0.5",
    "bootstrap": "^4.4.1",
    "css-loader": "^3.2.1",
    "file-loader": "^5.0.2",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "node-sass": "^4.13.0",
    "open-iconic": "^1.1.1",
    "sass-loader": "^8.0.0",
    "scss-loader": "^0.0.1",
    "style-loader": "^1.0.1",
    "url-loader": "^3.0.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  },
  "dependencies": {
    "@babel/runtime": "^7.7.6",
    "jquery": "^3.4.1"
  }

 

写 .babelrc 配置文件

{
  "presets": ["@babel/preset-env"],
  "plugins": [
      "@babel/plugin-transform-runtime",
      "@babel/plugin-proposal-class-properties"
  ]
}

webpack.config.js

 

    module: { //这个节点用于配置所有第三方模块，加载器
        rules: [
            {test: /\.js$/, exclude: /node_modules/,use: 'babel-loader'} 
        ]
    }

 

 

总结：

babel舍弃了以前的 babel-- 的命名方式，改成了@babel/-

stage-× 已经被弃用，要把babel-preset-stage-0 卸载，然后修改.babelrc文件

来源：CSDN

作者：zhangleia

链接：https://blog.csdn.net/zhangleia/article/details/103475906