webpack学习2
webpack开发环境配置
1.文件监听与webpack-dev-server
文件监听
在修改项目代码时，避免了重新更改带来的需要重新配置问题
做法：在命令行输入 npx webpack --watch，这种模式开发中并不常见
webpack-dev-server的安装与启动
webpack-dev-server是webpack官方提供的一个Webpack服务工具；安装并启用webpack-dev-server后，其会在本地开启一个网络服务器用来处理网络请求。webpack-dev-server支持热部署、跨域代理、数据模拟等等。
安装：npm i -D wevpack-dev-server
启动：通过cli方式：npx webpack-dev-server
webpack-dev-server的常用参数
webpack-dev-server的自定义参数项在配置文件里的devServer里进行配置，如，常见配置：
devServer:{
open:true,
compress:true,
hot:false,
historyApiFallback:true,
publicPath:'/',
port:8089
}
每次修改devServer配置后，都需要重新启动服务器。
open
用来配置webpack-dev-server开启本地web服务后是否自动打开浏览器，默认值是false；
hot
其用来配置webpack的模块热替换功能（Hot Module Replacement）
historyApiFallback
若该选项值为true:当在浏览器输入地址，找不到对应的页面或服务时，会直接将index.html页面渲染出来。
这里需要涉及到路由相关的知识。
前端路由有两种模式：hash与history,history模式下如果刷新浏览器，其会按照路径发送真实的资源请求，如果这个路径是前端配置的，服务端未进行配合处理时，就会返回404。为了解决history模式下的这个问题，配置historyApiFallback参数为true,解决404问题。
该参数的值有如下几种情况:
- boolean:默认false；
- object类型的值：配置rewrites属性：
historyApiFallback: {
rewrites: [
{
from: /.*/,
to: path.posix.join(config.dev.assetsPublicPath, "index.html")
}
]
},
port
通过配置port参数，可以指定web服务运行的端口号
compress
设定是否为静态资源开启Gzip压缩
publicPath
2.模块热更新（热替换）
模块热替换---hot module replacement（HMR),该方式相比使用webpack-dev-server实现自动刷新整个页面的功能更加高效：其只加载修改过的模块从而实现实时预览。
要开启webpack的模块热替换功能，只需要将devServer中的hot参数改为true即可，其会自动添加webpack.HotModuleReplacementPlugin插件,但是在前端项目中需要使用者进行触发。
3.webpack中的source map
什么是source map
在打包好运行的JS代码已经不再是原始的文件代码，打包后的代码十分冗余不适合开发调试。因此想要在浏览器里直接看到打包前的代码，就需要使用source map。source map是一个单独的文件，浏览器可以通过它还原出编译前的原始代码，其本质上是打包文件和源码的一个映射关系，将浏览器解析的dist目录下对应的报错的代码行转换为src目录下对应文件的代码行。devtool用于控制是否生成，以及如何生成source map。
开启source map功能：
devtool：'source-map'
当devtool的值是'source-map'时将生成单独的source map文件，如上图所示
devtool的其他配置项
可以参考 选项
开发环境与生产环境下的devtool
- 生产环境下通常使用none（或者省略devtool选项），不生产source map，从而避免源码泄露的危险；或者对服务器进行配置不允许普通用户访问source map文件；
- 开发环境下通常设置devtool为：
eval-cheap-module-source-map
