前言

  • 问：为什么应用babel?

    • webpack只了解ES5语法的js文件，并不了解ES6+的语法及js新的API。
    • babel能够将ES6+的语法及js新的API转换称ES5语法。

下载babel及相干

  1. 开发时依赖下载：
    yarn add babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime --dev
  2. 运行时依赖：
    yarn add @babel/runtime-corejs3 core-js@3

babel.config.js文件(babel配置文件)

在我的项目根目录下创立babel.config.js或.babelrc文件

module.exports = {    "presets": [        [            "@babel/preset-env"        ]    ],    "plugins": [        [            "@babel/plugin-transform-runtime",            {                corejs: {version: 3, proposals: true},                helpers: true,                useESModules: true,                regenerator: true,                absoluteRuntime: "./node_modules"            }        ]    ]};

@babel/preset-env：es6 转 es5，翻译JS新的api
@babel/plugin-transform-runtime：es新个性转换，将转换的代码提共通办法。减小代码量，减小打包大小。

注：配置babel前，须要配置browserslist，咱们间接在package.json中设置
    "browserslist": [      "> 1%",      "last 2 versions",      "not ie <= 8"    ]

webpack.config.js文件(webpack配置文件)

在我的项目根目录下创立webpack.config.js文件

  const path = require('path');  module.exports = {      entry: path.resolve(__dirname, 'src'),      output: {          path: path.resolve(__dirname, 'dist'),          filename: 'main.js'      },      module: {          rules: [              {                  test: /\.js$/,                  exclude: /(node_modules|bower_components)/,                  include: path.resolve(__dirname, 'src'),                  use: {                      loader: 'babel-loader'                  }              }          ]      }  };

exclude:排除门路
include:蕴含门路

执行yarn build命令打包，比照生成的前后文件

  • 应用babel前：

    • 存在箭头函数、const关键字等es6+语法

  • 应用babel后：

    • ES6+语法转换成为ES5语法

链接

上一篇 Webpack根底配置(一)
下一篇 Webpack根底配置(三)