• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

Webpack基础配置(二)

互联网 diligentman 2周前 (01-11) 8次浏览

前言

  • 问:为什么使用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+语法
      Webpack基础配置(二)
  • 使用babel后:

    • ES6+语法转换成为ES5语法
      Webpack基础配置(二)

喜欢 (0)