웹pack4 0 구성 요소 라이브러리 구축의 실현

코드 분리
코드 분리 방법은 세 가지가 있습니다.

입구 시작점:entry 설정을 사용하여 수동으로 코드를 분리합니다

중복 방지: SplitChunks Plugin을 사용하여 Chunk를 무겁게 하고 분리합니다

동적 가져오기: 모듈의 내연 함수 호출을 통해 코드를 분리합니다

동적 가져오기(dynamic imports)

import()

require.ensure

프리페치/프리로드 모듈(prefetch/preload module)
웹 팩 v4.6.0+는 프리페치 및 프리페치 지원을 추가했습니다.
import를 설명할 때 다음 내장 명령을 사용하면 웹 팩이 "resource hint (자원 알림)"를 출력하여 브라우저에 알릴 수 있습니다.

프리페치(프리페치): 앞으로 일부 내비게이션에서 필요할 수 있는 자원

preload(예전 로드): 현재 내비게이션에 자원이 필요할 수 있습니다

구성 항목 중점 상세 정보
(1)mode: "pruduction"
minification (코드 압축) 및 tree shaking (usedExports:true) 사용
DefinePlugin:process를 자동으로 지정합니다.env.NODE_ENV === 'production'
(2)devtool
source map 소개
운영 환경: source-map
개발 환경: inline-source-map
(3)optimization
splitChunks

splitChunks: {
 chunks: 'all', //   loadash
 //  (library)（  lodash   react）  vendor chunk  ， 
 //   client  ， ，  server  ，  client   server  。
 cacheGroups: {
  vendor: {
   test: /[\\/]node_modules[\\/]/,
   name: 'vendors',
   chunks: 'all'
  }
 }
},

runtimeChunk

runtimeChunk: 'single' //     runtime   chunk

(5)output

// filename: '[name].[contenthash].js', // content hash  
filename: 'webpack-numbers.js', 
path: path.resolve(__dirname, 'dist'),

//   library   import from 'webpackNumbers'
library: 'webpackNumbers', 
libraryTarget: 'umd'

(6)plugins
HashedModuleIdsPlugin

const { HashedModuleIdsPlugin } = require('webpack');

plugins: [
  //  ， 
  new HashedModuleIdsPlugin()
],

BundleAnalyzerPlugin
패킷 코드 분석

const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');

plugins: [
  new BundleAnalyzerPlugin()
]

웹 팩4가 0에서 구성 요소 라이브러리를 구축하는 실현에 관한 이 글은 여기까지 소개되었습니다. 더 많은 관련 웹 팩4의 구성 요소 라이브러리 구축 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!