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