webpack用到的库和知识点（针对Vue框架）常用的配置项：基本：模式：默认'development','production'，针对不同的模式，webpack会使用不同的打包时的插件和打包行为，我们也可以根据不同的打包方式自定义使用哪些插件或加载器。context：每个配置项路径的上下文，context默认值为CWD。建议将context切换到项目根目录，这样可以使项目配置独立于CWD输出：filename：打包chunk的文件名形式，一般涉及代码切分，多插件，多-入口和多束。[name]，一般为[name].bundle.js或[name].jspublicPath：请求资源时的路径resolve:extensions(Array)：对于某些扩展类型，可以不加后缀别名来引用(Object):路径别名开发模式:devtool:sourceMap方法devServer:hot:热更新proxy:proxyopen:打包后自动打开页面quiet:true,//FriendlyErrorsPlugin生产模式必备:optimization.splitChunks:用于chunk打包和chunking配置，为不同文件夹下的模块生成不同的chunk。常用库：开发必备的webpack-dev-server，webpack内置，通过devServer配置调整--inline：启用内联模式，构建消息会显示在浏览器控制台，socket.io客户端代码被打包在里面，so如通过websocket与webpack-dev-server通信，实现自动编译打包，自动页面刷新功能（默认为inline）--iframe：对应inline模式，构建消息显示在其中一个页面的iframe元素中--quiet:不显示打包信息--compress:启用gzip压缩--progress:显示打包进度合并会有很好的效果。rimraf可以用来删除之前的打包文件。ora可以用来在打包过程中在终端显示旋转圆圈，表示正在打包。同时还可以设置字体颜色。chalk可以对终端打印出来的文字进行样式修改，比如修改颜色等。portfinder端口设置可以使用自动设置端口，不再重复。这个库是在开发模式下搭建vue-cli时用到的。详见：https://zhuanlan.zhihu.com/p/...modules:base:eslint-loader（即将废弃，迁移到EslintWebpackPlugin）babel-loader:优化相关：use:'babel-loader?cacheDirectory=true'开启缓存Configuration:"stage-2":支持stage-2的语法标准env:modules:false表示不将esmodule转为commonjs，默认为true，如果为true，webpack的tree-shaking将无效{"presets":[["env",{“modules”:false,“targets”:{“browsers”:[">1%","last2versions","notie<=8"]}}],"stage-2"],"plugins":["transform-vue-jsx","transform-runtime"],"env":{"development":{"plugins":["dynamic-import-node"]}}}url-loader将大小在一定范围以下的各种媒体文件转换为dataURL，以避免过多的http请求注意：v5后已弃用，请考虑改用资产模块svg-sprite-loader用于处理icon图标，生成sprite图片。一方面可以减少http请求，另一方面可以使用
