如何从零开始搭建基于webpack4的组件库，实现长尾词效果？

本文共计635个文字，预计阅读时间需要3分钟。

代码分离+代码分离方法有三种：+ 输入起点：使用 entry 配置手动分离代码。+ 防止重复：使用 SplitChunksPlugin 去重和分离 chunk。+ 动态导入：通过模块中的内联函数调用动态导入代码。

代码分离

代码分离方法有三种：

• 入口起点：使用 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() ]

到此这篇关于webpack4从0搭建组件库的实现的文章就介绍到这了,更多相关webpack4搭建组件库内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！