webpack4从0搭建组件库的实现
代码分离
代码分离方法有三种：
- 入口起点：使用entry配置手动地分离代码。
- 防止重复：使用SplitChunksPlugin去重和分离chunk。
- 动态导入：通过模块中的内联函数调用来分离代码。
动态导入(dynamicimports)
- import()
- require.ensure
预取/预加载模块(prefetch/preloadmodule)
webpackv4.6.0+添加了预取和预加载的支持。
在声明import时，使用下面这些内置指令，可以让webpack输出"resourcehint(资源提示)"，来告知浏览器：
- prefetch(预取)：将来某些导航下可能需要的资源
- preload(预加载)：当前导航下可能需要资源
配置项重点详解
（1）mode:"pruduction"
启用minification(代码压缩)和treeshaking(usedExports:true)
自动指定DefinePlugin：process.env.NODE_ENV==='production'
（2）devtool
sourcemap简介
生产环境：source-map
开发环境：inline-source-map
（3）optimization
splitChunks
splitChunks:{
chunks:'all',//提取公共模块loadash
//将第三方库(library)（例如lodash或react）提取到单独的vendorchunk文件中，是比较推荐的做法
//利用client的长效缓存机制，命中缓存来消除请求，并减少向server获取资源，同时还能保证client代码和server代码版本一致。
cacheGroups:{
vendor:{
test:/[\\/]node_modules[\\/]/,
name:'vendors',
chunks:'all'
}
}
},
runtimeChunk
runtimeChunk:'single'//提取引导模板将runtime代码拆分为一个单独的chunk
（5）output
//filename:'[name].[contenthash].js',//contenthash内容变化才会变化 filename:'webpack-numbers.js', path:path.resolve(__dirname,'dist'), //暴露library这是库名称importfrom'webpackNumbers' library:'webpackNumbers', libraryTarget:'umd'
（6）plugins
HashedModuleIdsPlugin
const{HashedModuleIdsPlugin}=require('webpack');
plugins:[
//不会因模块增加和减少导致的模块内容变化，增加长缓存命中机制
newHashedModuleIdsPlugin()
],
BundleAnalyzerPlugin
分析打包代码
const{BundleAnalyzerPlugin}=require('webpack-bundle-analyzer');
plugins:[
newBundleAnalyzerPlugin()
]
到此这篇关于webpack4从0搭建组件库的实现的文章就介绍到这了,更多相关webpack4搭建组件库内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！