关于前端: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 根底配置(三)