解析打包ES6

安装babel-loader

yarn add babel-loader @babel/core @babel/preset-env -D

使用babel

• 在webpack.config.js中编写

  const path = require('path')
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
  
  module.exports = {
    optimization: {
      minimizer: [
        new OptimizeCSSAssetsPlugin()
      ]
    },
    devServer: {
      contentBase: path.join(__dirname, 'dist'),
      compress: true,
      port: 3000,
      open: true,
      progress: true
    },
    entry: {
      index: './src/index.js'
    },
    output: {
      filename: '[name].js',
      path: path.resolve(__dirname, 'dist')
    },
  
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
        },
        {
          test: /\.js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader:'babel-loader',
          }
        }
      ]
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
      }),
      new HtmlWebpackPlugin({
        title: '测试',
        minify: false,
        template: path.resolve(__dirname, 'src/index.html'),
        chunks: ['index']
      })
    ]
  }

• 「@babel/preset-env」：把es6转换成es5

• 「exclude」：不转换的文件夹，因为node_modules非常大

• 在src/index.js下写一段es6语法

  let my = ()=>{
      console.log('my')
  }

• 打包后会发现一段这样的代码

  // import './css/index.css'
  var my = function my() {
    console.log('my');
  };

❝

现在已经把es6语法转换成es5语法了

❞

压缩JS

• 安装uglifyjs-webpack-plugin

  yarn add uglifyjs-webpack-plugin -D

• 使用

  const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
  
  module.exports = {
    optimization: {
      minimizer: [
          new UglifyJsPlugin({
              cache: true,
              parallel: true,
              sourceMap: true
          })],
    },
  };

• 「cache」：缓存
• 「parallel」：快速构建
• 「sourceMap」：将错误消息位置映射到模块

❝

打包之后会发现js代码已经压缩了

❞

babel相关

• 「@babel-polyfill」: 用于模拟完整的 ES2015+ 环境

• 「@babel-plugin-transform-runtime」: 避免 polyfill 污染全局变量

  • 安装

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

    npm install --save @babel/runtime

    npm install --save @babel/polyfill

• 通常把babel的配置写在.babelrc.配置文件中

❝

具体配置参考babel官网 地址

❞

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        }
      }
    ]
  ],
  "plugins": ["@babel/plugin-transform-runtime"]
}

Tree Shaking

• 项目打包时没有用到的代码不会被打包
• 依赖于es6语法(import)
• require不可以
• 只需要的配置文件中把mode改为production