上一篇:【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']
]
}