webpack(4) 总结

　　代码分割:      　　 可以将node_modules中代码单独打包一个chunk最终输出     自动分析多入口chunk中，有没有公共的文件 如果有会打包成单独一个chunk

　　　　　　　　　　 optimization: {

   　　　　　　　　　　 splitChunks: {

     　　　　　　　　　　　　 chunks: 'all'

  　　　　　　　　　　　　　　　　  }

 　　　　　　　　　　　　　　　　 },

　　懒加载和预加载:        webpackPrefetch预加载    正常加载可以认为是并行加载(统一时间再多个文件）          预加载       prefetch等其他资源加载完毕   浏览器空闲了   再去加载其他资源

　　　　　　　　　　　　import(/*webpackChunkName:'test',webpackPrefetch:true*/'./test').then((res)=>{ console.log(res) })

　　　dll             使用dll技术，对某些第三方库进行单独打包    当运行webpack时   默认查找 webpack.config.js 配置文件 

　　　　　　　　　　　　  

　　　　　　entry:入口起点         

　　　　　　　　　　　　　　1.string -->'./src/index.js'     单入口   打包形成一个chunk，输出一个bundle文件    此时的chunk名称默认是main

　　　　　　　　　　　　　　2.array -->['./src/index.js','./src/add,js]   多入口  所有入口文件最终只会形成一个chunk  输出出去只有一个bundle文件

　　　　　　　　　　　　　　3.object   多入口     有几个入口文件就形成几个chunk  输出几个bundle文件      此时chunk的名称是  key

　　　　　　　　　　　　　　　　　　　　特殊用法:

　　　　　　　　　　　　　　　　　　　　　　　　　　所有入口文件最终只会形成一个chunk，输出出去只有一个bundle文件

　　　　　　　　　　　　　　　　　　　　　　　　　　 index: ['./src/index.js', './src/count.js'],

　　　　　　　　　　　　　　　　　　　　　　　　　　形成一个chunk，输出一个bundle文件

　　　　　　　　　　　　　　　　　　　　　　　　　　　add:'./src/add.js'
　　　　　output:路径配置

　　　　　　　　　　　　　　filename:'[name].js'       文件名称(指定名称+目录)

　　　　　　　　　　　　　　path:resolve(__dirname,'build')   //输出的文件目录(将来所有资源输出的公共目录)

　　　　　　　　　　　　　　publicPath:'./'        所有输出资源的公共路径 ——-》路径的前面

　　 　　　　　　　　　　　　chunkFilename:'[name]_chunk.js'     非入口cchunk名称   library:'[name];  整个库向外暴露的变量名

　　　　　　　　　　　　　　libraryTarget:window    变量名添加到哪个属性上

　　　　module    插件配置    

　　　　　　　　　　　　　　

　　　　　　resolve     解析模块的规则

　　　　　　　　　　　　　　

　　　　　　

　　　　　devServer     运行配置

　　　　　　　　　　　　　　　

 

　　　　　　optimization       

　　　　　　　　　　　　　　将当前模块的记录其他模块的hash单独打包为一个文件 runtime

　　　　　　　　　　　　　　解决    修改a文件导致b文件的contenthash变化

　　　　　　　　　　　　　　runtimeChunk:{

　　　　　　　　　　　　　　 　　name:entrypoint=>`runtime-${entrypoint.name}`

      　　　　　　　　　　　　　　},

　　　　　　　　　　　　　　minimizer:[

　　　　　　　　　　　　　　　　//配置生产环境的压缩方案 js和css

　　　　　　　　　　　　　　　　　new TerserWebpackPlugin({

　　　　　　　　　　　　　　　　　　　　cache:true      开启缓存

　　　　　　　　　　　　　　　　　　　　parallel：true     开启多进程打包

　　　　　　　　　　　　　　　　　　　　sourceMap:true   启用source-map

　　webpack5:     安装插件    npm i webpack@nextwebpack-cli-D

　　　　　　　　module.exports={mode:'development'}