webpack4从0搭建组件库的实现_JavaScript

webpack4从0搭建组件库的实现

2021-11-25 16:06lihaixing JavaScript

这篇文章主要介绍了webpack4从0搭建组件库的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

代码分离

代码分离方法有三种：

入口起点：使用 entry 配置手动地分离代码。
防止重复：使用 SplitChunksPlugin 去重和分离 chunk。
动态导入：通过模块中的内联函数调用来分离代码。

动态导入(dynamic imports)

import()
require.ensure

预取/预加载模块(prefetch/preload module)

webpack v4.6.0+ 添加了预取和预加载的支持。

在声明 import 时，使用下面这些内置指令，可以让 webpack 输出 "resource hint(资源提示)"，来告知浏览器：

prefetch(预取)：将来某些导航下可能需要的资源
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()

									]