【webpack5修行之道】第16篇：性能优化-externals

上一篇：【webpack5修行之道】第15篇：性能优化-多进程打包

什么是externals？

externals可以告诉webpack不打包资源，从而减少入口文件的大小，如果不打包某个包，又要用到他，这个时候需要从html的script标签进行引入，一般引入的是包的cdn资源

配置externals的方法有多种： 具体查看webpack官网externals，本文仅对常用的三种方法做描述

方法一：

修改webpack.config.js，配置externals

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { resolve } = require('path')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: resolve(__dirname, 'build'),
    filename: 'js/[name].[chunkhash:10].js'
  },
  module: {
    rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use:[
              //开启多线程打包
                'thread-loader',
                {
                  loader: 'babel-loader',
                  options: {
                    presets: [
                      ['@babel/preset-env']
                    ]
                  }