webpack 安装babel处理ES6语法

1.package.json 下6个包（版本不同可能会出错，注意版本）

babel-loader：加载器
@babel/core：babel核心包,babel-loader的核心依赖
@babel/preset-env：ES语法分析包
@babel/runtime和@babel/plugin-transform-runtime：babel 编译时只转换语法，几乎可以编译所有时新的 JavaScript 语法，但并不会转化BOM（浏览器）里面不兼容的API。比如 Promise,Set,Symbol,Array.from,async 等等的一些API。这2个包就是来搞定这些api的。
@babel/plugin-proposal-class-properties：用来解析类的属性的。

原网址：https://www.cnblogs.com/ldq678/p/10448374.html

　　npm i @babel/core babel-loader @babel/plugin-transform-runtime -D
　　npm i @babel/preset-env @babel/plugin-proposal-class-properties @babel/runtime -D

{
  "name": "study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot",
    "dev1": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.7.7",
    "@babel/plugin-proposal-class-properties": "^7.7.4",
    "@babel/plugin-transform-runtime": "^7.7.6",
    "@babel/preset-env": "^7.7.7",
    "@babel/runtime": "^7.7.7",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.4.0",
    "file-loader": "^5.0.2",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "open-iconic": "git+https://github.com/iconic/open-iconic.git",
    "sass": "^1.24.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.1.2",
    "url-loader": "^3.0.0",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1"
  },
  "dependencies": {
    "bootstrap": "^4.4.1"
  }
}

2.babelrc 文件下

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

3.webpack.config.js 下添加 'babel-loader' 

 module: {
        rules: [
            { test: /.css$/, use: ['style-loader', 'css-loader'] },
            //处理 less 文件
            { test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            //处理 sass 文件
            { test: /.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
            //处理css 里面的图片
            { test: /.(jpg|png|gif|bmp|jpeg)$/, use: ['url-loader?limit&name[hash:8]-[name].[ext]'] },
            //处理字体文件
            { test: /.(ttf|eot|svg|woff|woff2|otf)$/, use: 'url-loader' },
            //处理es6 语法  exclude 排除 node_modules 下面的文件
            { test: /.js$/, use: 'babel-loader', exclude: /node_modules/ },
        ]
    },