「这是我参与2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战」
搭建本地服务
之前我们都是通过webpack来对项目进行打包，然后利用vscode的live server插件，来运行我们的项目的。那么会带了一个问题，每次更新代码都要重新打包代码，为了解决这个问题，我们可以使用一下两种方法。
一、webpack watch mode；
二、webpack-dev-server（常用）
webpack watch mode
我们可以通过配置wepback为watch模式，在该模式下，webpack依赖图中的所有文件，只要有一个发生了更新，那么代码将被重新编译； 这要我们就不需要手动进行打包了。
配置方式：
方式一：在导出的配置中，添加 watch: true；
方式二：在启动webpack的命令中，添加 --watch的标识；
"scripts": {
"build": "webpack --watch"
},
webpack-dev-server
安装：
npm install webpack-dev-server -D
配置devServer:
- static：配置从相应目录提供静态文件，默认为public文件夹
- hot：配置模块热替换（Hot Module Replacement）,模块热替换是指在 应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个页面；
devServer: {
static: {
directory: path.join(__dirname, "aaa"),
},
hot: true, //启用模块热替换
host: "localhost", //设置host
port: 8005, //设置端口号
open: true, //自动打开浏览器
compress: true, //将静态资源进行gzip压缩
},
配置了hot为true后，我们还需要指定哪些模块需要模块热替换。
import "./js/component";
if (module.hot) {
module.hot.accept("./js/component.js", function () {});
}
像上面这样配置一个一个配置需要模块热替换的模块，很麻烦，但是不必担心，在vue和react中都有成熟的库为我们解决这个问题。
vue中v-loader实际上是实现了vue组件的HMR。
resolve
resolve用于设置模块如何被解析：
- 在开发中我们会有各种各样的模块依赖，这些模块可能来自于自己编写的代码，也可能来自第三方库；
- resolve可以帮助webpack从每个 require/import 语句中，找到需要引入到合适的模块代码；
- webpack 使用 enhanced-resolve 来解析文件路径；
webpack能解析三种文件路径：
绝对路径 :
- 由于已经获得文件的绝对路径，因此不需要再做进一步解析。
相对路径 :
- 在这种情况下，使用 import 或 require 的资源文件所处的目录，被认为是上下文目录；
- 在 import/require 中给定的相对路径，会拼接此上下文路径，来生成模块的绝对路径；
模块路径
- 在 resolve.modules中指定的所有目录检索模块；
- 默认值是 ['node_modules']，所以默认会从node_modules中查找文件；
确定是文件还是文件夹
如果是文件：
- 有后缀名，则加载该文件
- 没有后缀名，使用resolve.extensions选项作为文件扩展名解析；extensions默认值为 ['.wasm', '.mjs', '.js', '.json']；
如果是文件夹：会在文件夹中根据 resolve.mainFiles配置选项中指定的文件顺序查找；
- resolve.mainFiles的默认值是 ['index']；
- 再根据 resolve.extensions来解析扩展名；
配置resolve:
resolve: {
extensions: [".wasm", ".mjs", ".js", ".json", ".vue"],//扩展名
alias: {
"@": path.resolve(__dirname, "./src/js"),//起别名
},
},
区分开发和生产环境
配置不同的webpack配置文件。然后开发和生产时使用不同的配置文件。
注意: entry的路径相对于context属性,context默认为项目根目录。
"scripts": {
"build": "webpack --config ./config/webpack.pro.config.js",
"serve": "webpack serve --config ./config/webpack.dev.config.js"
},
公用配置文件：webpack.com.config.js
和并配置配置文件时，使用到了webpack-merge。
