babel-loader配置 @beta版

作用

使用ES6编写js语法时，由于有些浏览器不支持，故需使用babel插件将ES6转换为ES5。

安装

webpack 3.x | babel-loader 8.x | babel 7.x

npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack --save-dev

webpack 3.x babel-loader 7.x | babel 6.x

npm install babel-loader babel-core babel-preset-env webpack --save-dev

我这里用第一种。

配置

webpack.config.js

{
	test: /\.js$/,
	loader: ['babel-loader'],
	exclude: /node_modules/
}

新建.babelrc文件，并写入babel的配置，webpack会依赖此配置文件来使用babel编译ES6代码

{
	"presets": ["@babel/preset-env"]
}

或者不使用.babelrc文件，直接加在webpack.config.js

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

添加配置
1、babel会在每个文件都插入辅助代码，使得体积过大，可以引入 babel runtime 作为一个独立模块，来避免重复引入。

npm install @babel/plugin-transform-runtime --save-dev
npm install @babel/runtime --save

2、‘modules’:false：设置模块引用规则，可以设置成"amd" | “umd” | “systemjs” | “commonjs” | false, defaults to “commonjs”,设置了false，就是用es6以上默认的规则。

3、targets.browsers:设置兼容的浏览器范围

4、“comments”: false 删除已编译代码的注释

.babelrc完整版

{
  "presets": [
    ["@babel/preset-env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }]
  ],
  "plugins": ["@babel/transform-runtime"]，
  "comments": false
}

https://www.jianshu.com/p/0dc3bddb6da8?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
https://babeljs.io/docs/en/babel-preset-stage-2/
https://www.webpackjs.com/loaders/babel-loader/