webpack--开发环境(devserver)
开发环境devServer
我们在开发项目时(development|dev), 常常需要一个本地服务器托管本地资源,比如你们用的vscode的右键open in server 的插件.我们可以在webpack集成的打包环境中配置本地服务器
安装:npm install --save-dev webpack webpack-dev-server webpack-cli
配置参数: DevServer | webpack
module.exports = {
devServer: {
//告诉dev-server在服务器启动后打开浏览器。将其设置为true以打开默认浏览器。但是:如果你的电脑有防火墙或者有管理员权限的限制或者电脑很卡 可能不会自定打开浏览器
open: true, //cli中 webpack serve --open
//本地服务器监听的端口
port: 8080,
//启用热更新,直接使用webpack的热更新模块.就是改了代码自动打包后自定刷新浏览器页面:bug就是同open,记住 卡了就刷新一下不用纠结
hot: true,
//指定要使用的主机(localhost|ipv4|ipv6)。如果你想让你的服务器可以被外部访问,像这样指定:
//让你同桌访问 然后你改项目代码 他就会刷新
host: '192.168.2.60',
//启用gzip压缩
compress: true,
//代理配置,这里只是配置,不用写代理服务器的代码(配置好了它帮我们实现)
proxy: {
'/api': 'http://localhost:7001',
},
proxy: {
'/api': {
target: 'http://localhost:7001',
secure:true,//如果代理的target是https接口,需要配置它
pathRewrite: { '^/api': '/chongxie' },//请求时重写pathname
},
},
}
}
面试题:
webpack的cli配置中有--watch的观察模式 为什么还要配置服务?或者说devServer的优势是什么?
答案:devServer的功能是:当文件发生修改，通知各个模块进行更新加载，加载到计算机内存，刷新浏览器
1.项目中加载的东西很多.内存刷新 比磁盘刷新反应快
2.热更新使得开发调试效率更高
3.自动配置代理 比手动设计代理服务器更方便
webpack 的构建流程是什么?从读取配置到输出文件这个过程
答案:
webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：
1、初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数
2、开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译
3、确定入口：根据配置中的 entry 找出所有的入口文件
4、编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
5、完成模块编译：在经过第 4 步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系
6、输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的Chunk， 再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会
7、输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统，在以上过程中，webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用webpack 提供的API改变 webpack 的运行结果
如何利用 webpack 来优化前端性能
1、压缩代码。uglifyJsPlugin 压缩 js 代码， mini-css-extract-plugin 压缩css代码
2、利用 CDN 加速，将引用的静态资源修改为 CDN 上对应的路径，可以利用webpack对于 output 参数和 loader 的 publicpath 参数来修改资源路径
3、删除死代码（tree shaking），css 需要使用 Purify-CSS
4、 提取 公共 代码集成为模块 。