Webpack4(十) 使用Babel处理ES6语法

Babel

因为在 IE 浏览器里面不支持 es6 写法 所以必须安装一个工具 babel 来转换 es6 语法

(一) 安装 babel

cnpm i --save-dev babel-loader @babel/core

(二)修改 webpack.config.js 文件里面的 rules

const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const webpack = require('webpack')
var path = require('path')

module.exports = {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map', //开发阶段
  //devtool:"cheap-module-source-map", //线上环境开发
  entry: {
    main: './src/index.js', //入口文件路径
  },
  devServer: {
    contentBase: './dist',
    open: true,
    port: 8080,
    hot: true, //加个选项
    hotOnly: true, //加即使热更新也不自动刷新
  },
  module: {
    rules: [
      //增加规则
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'images/',
            limit: 2048,
          },
        },
      },
      {
        test: /\.(eot|ttf|svg))$/,
        use: {
          loader: 'file-loader',
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },

      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader'],
      },
    ],
  },
  //加入插件
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html',
    }),
    new CleanWebpackPlugin(['dist']), //删除这个目录下面的文件
    new webpack.HotModuleReplacementPlugin(),
  ],
  output: {
    filename: 'bundle.js', //输出得名字
    path: path.resolve(__dirname, 'dist'), //输出得路径 __dirname就是当前目录
  },
}

(3) 安装 babel/preset-env 按需加载

cnpm i @babel/preset-env -D

(4)修改 rules 下面的 options

const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const webpack = require('webpack')
var path = require('path')

module.exports = {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map', //开发阶段
  //devtool:"cheap-module-source-map", //线上环境开发
  entry: {
    main: './src/index.js', //入口文件路径
  },
  devServer: {
    contentBase: './dist',
    open: true,
    port: 8080,
    hot: true, //加个选项
    hotOnly: true, //加即使热更新也不自动刷新
  },
  module: {
    rules: [
      //增加规则
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
        },
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'images/',
            limit: 2048,
          },
        },
      },
      {
        test: /\.(eot|ttf|svg))$/,
        use: {
          loader: 'file-loader',
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },

      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader'],
      },
    ],
  },
  //加入插件
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html',
    }),
    new CleanWebpackPlugin(['dist']), //删除这个目录下面的文件
    new webpack.HotModuleReplacementPlugin(),
  ],
  output: {
    filename: 'bundle.js', //输出得名字
    path: path.resolve(__dirname, 'dist'), //输出得路径 __dirname就是当前目录
  },
}

(5) 安装 babel/polyfill

cnpm i --save @babel/polyfill

(6) 页面上引用 polyfill

import '@babel/polyfill'
const arr = [new Promise(() => {}), new Promise(() => {})]
arr.map((item, index) => {
  console.log(item)
})

(7) 按需加载

const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const webpack = require('webpack')
var path = require('path')

module.exports = {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map', //开发阶段
  //devtool:"cheap-module-source-map", //线上环境开发
  entry: {
    main: './src/index.js', //入口文件路径
  },
  devServer: {
    contentBase: './dist',
    open: true,
    port: 8080,
    hot: true, //加个选项
    hotOnly: true, //加即使热更新也不自动刷新
  },
  module: {
    rules: [
      //增加规则
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [['@babel/preset-env', { useBuiltIns: 'usage' }]],
        },
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'images/',
            limit: 2048,
          },
        },
      },
      {
        test: /\.(eot|ttf|svg))$/,
        use: {
          loader: 'file-loader',
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },

      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader'],
      },
    ],
  },
  //加入插件
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html',
    }),
    new CleanWebpackPlugin(['dist']), //删除这个目录下面的文件
    new webpack.HotModuleReplacementPlugin(),
  ],
  output: {
    filename: 'bundle.js', //输出得名字
    path: path.resolve(__dirname, 'dist'), //输出得路径 __dirname就是当前目录
  },
}

防止污染全局变量(局部引用)

• 安装

cnpm install --save-dev @babel/plugin-transform-runtime

cnpm install --save @babel/runtime

• 修改 webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const webpack = require('webpack')
var path = require('path')

module.exports = {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map', //开发阶段
  //devtool:"cheap-module-source-map", //线上环境开发
  entry: {
    main: './src/index.js', //入口文件路径
  },
  devServer: {
    contentBase: './dist',
    open: true,
    port: 8080,
    hot: true, //加个选项
    hotOnly: true, //加即使热更新也不自动刷新
  },
  module: {
    rules: [
      //增加规则
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          plugins: [
            [
              '@babel/plugin-transform-runtime',
              {
                corejs: 2,
                helpers: true,
                regenerator: true,
                useESModules: false,
              },
            ],
          ],
        },
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'images/',
            limit: 2048,
          },
        },
      },
      {
        test: /\.(eot|ttf|svg))$/,
        use: {
          loader: 'file-loader',
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },

      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader'],
      },
    ],
  },
  //加入插件
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html',
    }),
    new CleanWebpackPlugin(['dist']), //删除这个目录下面的文件
    new webpack.HotModuleReplacementPlugin(),
  ],
  output: {
    filename: 'bundle.js', //输出得名字
    path: path.resolve(__dirname, 'dist'), //输出得路径 __dirname就是当前目录
  },
}

• 在 index.js 里面

const arr = [new Promise(() => {}), new Promise(() => {})]
arr.map((item, index) => {
  console.log(item)
})

• 也可以把 bable-loader.js 里面的 rules 拿出来,先安装

cnpm i --save @babel/runtime-corejs2

• 然后在根目录下面新建一个.babelrc 文件

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 2,
        "helpers": true,
        "regenerator": true,
        "useESModules": false,
      },
    ],
  ]
}

• 最后在删除 options 里面的内容

const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const webpack = require('webpack')
var path = require('path')

module.exports = {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map', //开发阶段
  //devtool:"cheap-module-source-map", //线上环境开发
  entry: {
    main: './src/index.js', //入口文件路径
  },
  devServer: {
    contentBase: './dist',
    open: true,
    port: 8080,
    hot: true, //加个选项
    hotOnly: true, //加即使热更新也不自动刷新
  },
  module: {
    rules: [
      //增加规则
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'images/',
            limit: 2048,
          },
        },
      },
      {
        test: /\.(eot|ttf|svg))$/,
        use: {
          loader: 'file-loader',
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },

      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader'],
      },
    ],
  },
  //加入插件
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html',
    }),
    new CleanWebpackPlugin(['dist']), //删除这个目录下面的文件
    new webpack.HotModuleReplacementPlugin(),
  ],
  output: {
    filename: 'bundle.js', //输出得名字
    path: path.resolve(__dirname, 'dist'), //输出得路径 __dirname就是当前目录
  },
}