Webpack基础配置(二)

前言

• 问：为什么使用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基础配置(三)