四个核心概念入口（entry）入口是整个配置文件的入口，没有之一。entry有两种类型的条目和四种配置。两种类型单文件入口多文件入口四种配置值是字符串值是对象值是数组功能代码演示"第一种配置（字符串），主要用于单页应用"const{resolve}=require('path')module.exports={entry:resolve(__dirname,'src/index.js')}"第二种配置（对象），主要用于多页应用"const{resolve}=require('path')module.exports={entry:{test:resolve(__dirname,'src/index.js'),test2:resolve(__dirname,'src/index2.js')}}"第三个配置(数组),这个配置可能比较少见，在单页应用中也会用到，这个配置主要是把数组的1-n项打包成0项，有时用在js兼容的动态链接dll中"const{resolve}=require('path')module.exports={entry:[resolve(__dirname,'src/index.js'),resolve(__dirname,'src/index2.js')],}》第四个配置（函数),function只返回上述三种类型之一。”const{resolve}=require('path')module.exports={entry:()=>'./src/index.js',}output既然有入口，那必然有出口！就像人一样，要吃饭就得呼吸。这里的outlet就是放打包好的东西的地方。输出路径的常用配置（输出的位置，默认dist目录）filename（输出文件的名称，默认main）pulibPath（指定打包后的文件应该引用到哪里，一般用于生产环境，默认为空）代码演示const{resolve}=require('path')module.exports={output:{path:resolve(__dirname,'dist'),filename:'bundle.js',publicPath:'http:baidu.com'}}"filename几个配置可以直接如上写，也可以通过在文件名上加上hash值动态设置，比如这样"module.exports={output:{filename:'[name]_[hash].js'}}HashValueWebpack提供了以下哈希值：hashchunkhash（同一个chunk，同一个hash）contenthash（一个文件一个hash）modulemodule.rules是loader的配置位置，loader是用来解决一些代码兼容性问题。module.rulestest(loader匹配规则)exclude(排除哪些文件不需要匹配)include(只匹配哪些文件)loader(使用哪个loader,单个)use(使用哪个loader,多个)代码常用配置演示模块。exports={module:{rules:[{test:/.html$/,exclude:/node_modelus/,include:/src/,loader:'html-loader',},{test:/.css/,使用：['style-loader','css-loader']}]}}loader加载器常用配置（使用哪个loader）options（传给loader的参数，不同的loader，options参数也不同）代码演示module.exports={module:{rules:{test:/.js$/,exclude:/node_modelus/,use:[//没有参数'thread-loader',//参数{loader:'babel-loader',options:{presets:['@babel/preset-env']}}]}}}pluginsplugins是配置插件的位置，是一个数组，插件多用于代码优化。插件没有统一的用法，因插件而异。很难说他们有相同的东西，就是newxxx中一些常用的loadercss-relatedstyle-loader（处理样式内联样式）css-loader（处理.css文件）postcss-loader（处理css兼容性)less-loader(处理.less文件)sass-loader(处理.sass/.scss文件)letcomment=["style-loader","css-loader",{loader:"postcss-loader",options:{postcssOptions:{plugins:['postcss-preset-env']}}}]module.exports={module:{rules:[{test:/.css/,use:[...comment]},{test:/.less$/,使用:[...comment,'less-loader']}]}}js相关的babel-loader@babel/core@babel/preset-env@babel/polyfillmodule.exports={entry:['@babel/polyfill','./src/index.js']...模块:{规则:[{test:/.js$/,使用:[{loader:'babel-loader',options:{presets:['@babel/preset-env']//或者presets:[['env',{module:false}]]}}]}]}}文件相关的url-loaderfile-loaderhtml-loadermodule.exports={...模块：{规则：[{测试：/.(png|jpg|gif)$/，使用：[{加载器：文件加载器，选项：{限制：4*1024，名称：'img/[name]_[hash:10].[ext]'}}]},{test:/.html$/,loader:'html-loader'}]}}vue阶段关闭vue-loadervue-style-loadermodule.exports={...module:{rules:[{test:/.vue$/,loader:'vue-loader'},{test:/.css$/,使用:['vue-style-loader','css-loader']}]}}优化开发环境HRM（热替换）webpack-dev-server（本地服务器）soure-map（debug）webpack-bundle-analyzer(packageGeneratecodeblock分析视图)size-plugin(监控打包资源的可变体积)speed-measure-webpack-plugin(分析loader和plugin打包耗时)生产环境体积优化css提取(mini-css-extract-plugin）css压缩（optimize-css-assets-webpack-plugin）html压缩（html-webpack-plugin）externals（不包括不需要打包的第三方）js压缩（生产模式自动开启）tree-shake（生产模式自动开启（webpack4仅限EsModule；webpack5不限EsModule、CommonJs，优秀））code-split（优化）import（懒加载、preloading（预加载慎用））打包速度优化多线程打包(thread-loader,happyPack动态链(DLL)babelcache(cachecacheDirectory)exclude/exclude(排除一些不需要编译的文件)module.noParse(排除不需要loader编译的第三方库)注意，webpack优化需要看自己的项目情况对症下药，而不是看有兴趣的就用；如果是这样，你就给自己挖坑了，也可能埋头其他resolve（如何解析配置模块）更多的配置，loader，plugin等，自己看文档
