Appearance
为什么要搭建本地服务器？
目前我们开发的代码，为了运行需要有两个操作：
操作一：npm run build，编译相关的代码；
操作二：通过 live server 或者直接通过浏览器，打开 index.html 代码，查看效果；
这个过程经常操作会影响我们的开发效率，我们希望可以做到，当文件发生变化时，可以自动的完成编译 和展示；
为了完成自动编译，webpack 提供了几种可选的方式：
webpack watch mode；
webpack-dev-server（常用）；
webpack-dev-middleware；
webpack-dev-server
上面的方式可以监听到文件的变化，但是事实上它本身是没有自动刷新浏览器的功能的
当然，目前我们可以在 VSCode 中使用 live-server 来完成这样的功能；
但是，我们希望在不适用 live-server 的情况下，可以具备 live reloading（实时重新加载）的功能；
安装 webpack-dev-server
npm install webpack-dev-server -D
修改配置文件，启动时加上 serve 参数：
json
"scripts": {
"build": "webpack --config wk.config.js",
"serve": "webpack serve --config wk.config.js"
},然后执行，npm run serve
webpack-dev-server 在编译之后不会写入到任何输出文件，而是将 bundle 文件保留在内存中：
事实上 webpack-dev-server 使用了一个库叫 memfs（memory-fs webpack 自己写的）
认识模块热替换（HMR）
什么是 HMR 呢？
HMR 的全称是 Hot Module Replacement，翻译为模块热替换；
模块热替换是指在 应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个页面；
HMR 通过如下几种方式，来提高开发的速度：
不重新加载整个页面，这样可以保留某些应用程序的状态不丢失；
只更新需要变化的内容，节省开发的时间；
修改了 css、js 源代码，会立即在浏览器更新，相当于直接在浏览器的 devtools 中直接修改样式；
如何使用 HMR 呢？
默认情况下，webpack-dev-server 已经支持 HMR，我们只需要开启即可（默认已经开启）；
在不开启 HMR 的情况下，当我们修改了源代码之后，整个页面会自动刷新，使用的是 live reloading；
开启 HMR
修改 webpack 的配置：
javascript
module.exports = {
devServer: {
hot: true,
},
};浏览器可以看到如下效果：
但是你会发现，当我们修改了某一个模块的代码时，依然是刷新的整个页面：
这是因为我们需要去指定哪些模块发生更新时，进行 HMR；
./utils/demo.js
javascript
console.log("---------1111232324242");main.js
javascript
if (module.hot) {
module.hot.accept("./utils/demo.js", () => {
console.log("demo模块发生了更新");
});
}
框架的 HMR
有一个问题：在开发其他项目时，我们是否需要经常手动去写入 module.hot.accpet 相关的 API 呢？
比如开发 Vue、React 项目，我们修改了组件，希望进行热更新，这个时候应该如何去操作呢？
事实上社区已经针对这些有很成熟的解决方案了：
比如 vue 开发中，我们使用 vue-loader，此 loader 支持 vue 组件的 HMR，提供开箱即用的体验；
比如 react 开发中，有 React Hot Loader，实时调整 react 组件（目前 React 官方已经弃用了，改成使用 react-refresh）；
host 配置
host 设置主机地址：
默认值是 localhost；
如果希望其他地方也可以访问，可以设置为 0.0.0.0；
localhost 和 0.0.0.0 的区别：
localhost：本质上是一个域名，通常情况下会被解析成 127.0.0.1;
127.0.0.1：回环地址(Loop Back Address)，表达的意思其实是我们主机自己发出去的包，直接被自己接收;
正常的数据库包经常 应用层 - 传输层 - 网络层 - 数据链路层 - 物理层 ;
而回环地址，是在网络层直接就被获取到了，是不会经常数据链路层和物理层的;
比如我们监听 127.0.0.1 时，在同一个网段下的主机中，通过 ip 地址是不能访问的;
0.0.0.0：监听 IPV4 上所有的地址，再根据端口找到不同的应用程序;
比如我们监听 0.0.0.0 时，在同一个网段下的主机中，通过 ip 地址是可以访问的;
port、open、compress
port 设置监听的端口，默认情况下是 8080
open 是否打开浏览器：
默认值是 false，设置为 true 会打开浏览器；
也可以设置为类似于 Google Chrome 等值；
compress 是否为静态文件开启 gzip compression：
默认值是 false，可以设置为 true；
javascript
module.exports = {
devServer: {
hot: true,
host: "0.0.0.0",
port: 8888,
open: true,
compress: true,
},
};Proxy（Vue 项目学习）
proxy 是我们开发中非常常用的一个配置选项，它的目的设置代理来解决跨域访问的问题：
比如我们的一个 api 请求是 http://localhost:8888，但是本地启动服务器的域名是 http://localhost:8000，这个时候发送网
络请求就会出现跨域的问题；
那么我们可以将请求先发送到一个代理服务器，代理服务器和 API 服务器没有跨域的问题，就可以解决我们的跨域问题了；
我们可以进行如下的设置：
target：表示的是代理到的目标地址，比如 /api-hy/moment 会被代理到 http://localhost:8888/api-hy/moment；
pathRewrite：默认情况下，我们的 /api-hy 也会被写入到 URL 中，如果希望删除，可以使用 pathRewrite；
secure：默认情况下不接收转发到 https 的服务器上，如果希望支持，可以设置为 false；
changeOrigin：它表示是否更新代理后请求的 headers 中 host 地址；
changeOrigin 的解析（Vue 项目学习）
这个 changeOrigin 官方说的非常模糊，通过查看源码我发现其实是要修改代理请求中的 headers 中的 host 属性：
因为我们真实的请求，其实是需要通过 http://localhost:8888来请求的；
但是因为使用了代码，默认情况下它的值时 http://localhost:8000；
如果我们需要修改，那么可以将 changeOrigin 设置为 true 即可；
historyApiFallback （Vue 项目学习）
historyApiFallback 是开发中一个非常常见的属性，它主要的作用是解决 SPA 页面在路由跳转之后，进行页面刷新时，返回 404
的错误。
boolean 值：默认是 false
如果设置为 true，那么在刷新时，返回 404 错误时，会自动返回 index.html 的内容；
object 类型的值，可以配置 rewrites 属性：
可以配置 from 来匹配路径，决定要跳转到哪一个页面；
事实上 devServer 中实现 historyApiFallback 功能是通过 connect-history-api-fallback 库的：
可以查看 connect-history-api-fallback 文档
如何区分开发环境
目前我们所有的 webpack 配置信息都是放到一个配置文件中的：webpack.config.js
当配置越来越多时，这个文件会变得越来越不容易维护；
并且某些配置是在开发环境需要使用的，某些配置是在生产环境需要使用的，当然某些配置是在开发和生产环境都会使用的；
所以，我们最好对配置进行划分，方便我们维护和管理；
那么，在启动时如何可以区分不同的配置呢？
方案一：编写两个不同的配置文件，开发和生产时，分别加载不同的配置文件即可；
方式二：使用相同的一个入口配置文件，通过设置参数来区分它们；
package.json
json
"scripts": {
"build": "webpack --config ./config/webpack.prod.config.js",
"serve": "webpack serve --config ./config/webpack.dev.config.js"
}config/webpack.dev.config.js
javascript
const path = require("path");
const { VueLoaderPlugin } = require("vue-loader/dist/index");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { DefinePlugin } = require("webpack");
module.exports = {
entry: "./src/main.js", // 这里路径不需要修改
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "../build"), // 这里路径需要修改
},
resolve: {
extensions: [".js", ".json", ".vue", ".jsx", ".ts", ".tsx"],
alias: {
utils: path.resolve(__dirname, "../src/utils"), // 这里路径需要修改
},
},
mode: "development",
devServer: {
hot: true,
// host: "0.0.0.0",
// port: 8888,
// open: true
// compress: true
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"],
},
{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader", "postcss-loader"],
},
{
test: /\.(png|jpe?g|svg|gif)$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 60 * 1024,
},
},
generator: {
filename: "img/[name]_[hash:8][ext]",
},
},
{
test: /\.js$/,
use: [
{
loader: "babel-loader",
},
],
},
{
test: /\.vue$/,
loader: "vue-loader",
},
],
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
title: "电商项目",
template: "./index.html",
}),
new DefinePlugin({
BASE_URL: "'./'",
coderwhy: "'why'",
counter: "123",
}),
],
};config/webpack.prod.config.js
javascript
const path = require("path");
const { VueLoaderPlugin } = require("vue-loader/dist/index");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { DefinePlugin } = require("webpack");
module.exports = {
mode: "production",
entry: "./src/main.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "../build"),
clean: true,
},
resolve: {
extensions: [".js", ".json", ".vue", ".jsx", ".ts", ".tsx"],
alias: {
utils: path.resolve(__dirname, "../src/utils"),
},
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"],
},
{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader", "postcss-loader"],
},
{
test: /\.(png|jpe?g|svg|gif)$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 60 * 1024,
},
},
generator: {
filename: "img/[name]_[hash:8][ext]",
},
},
{
test: /\.js$/,
use: [
{
loader: "babel-loader",
},
],
},
{
test: /\.vue$/,
loader: "vue-loader",
},
],
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
title: "电商项目",
template: "./index.html",
}),
new DefinePlugin({
BASE_URL: "'./'",
coderwhy: "'why'",
counter: "123",
}),
],
};入口文件解析
我们之前编写入口文件的规则是这样的：./src/index.js，但是如果我们的配置文件所在的位置变成了 config 目录，我们是否应
该变成 ../src/index.js 呢？
如果我们这样编写，会发现是报错的，依然要写成 ./src/index.js；
这是因为入口文件其实是和另一个属性时有关的 context；
context 的作用是用于解析入口（entry point）和加载器（loader）：
官方说法：默认是当前路径（但是经过我测试，默认应该是 webpack 的启动目录）
另外推荐在配置中传入一个值；
区分开发和生产环境配置
这里我们创建三个文件：
webpack.comm.config.js
webpack.dev.config.js
webpack.prod.config.js
将 webpack.dev.config.js 和 webpack.prod.config.js 公共部门的代码抽离到 webpack.comm.config.js 中，然后进行引入，这里使用到一个库，webpack-merge，需要安装
npm install webpack-merge -D
webpack.comm.config.js
javascript
const path = require("path");
const { VueLoaderPlugin } = require("vue-loader/dist/index");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { DefinePlugin } = require("webpack");
module.exports = {
entry: "./src/main.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "../build"),
},
resolve: {
extensions: [".js", ".json", ".vue", ".jsx", ".ts", ".tsx"],
alias: {
utils: path.resolve(__dirname, "../src/utils"),
},
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"],
},
{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader", "postcss-loader"],
},
{
test: /\.(png|jpe?g|svg|gif)$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 60 * 1024,
},
},
generator: {
filename: "img/[name]_[hash:8][ext]",
},
},
{
test: /\.js$/,
use: [
{
loader: "babel-loader",
},
],
},
{
test: /\.vue$/,
loader: "vue-loader",
},
],
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
title: "电商项目",
template: "./index.html",
}),
new DefinePlugin({
BASE_URL: "'./'",
coderwhy: "'why'",
counter: "123",
}),
],
};webpack.dev.config.js
javascript
const { merge } = require("webpack-merge");
const commonConfig = require("./webpack.comm.config");
module.exports = merge(commonConfig, {
mode: "development",
devServer: {
hot: true,
// host: "0.0.0.0",
// port: 8888,
// open: true
// compress: true
},
});webpack.prod.config.js
javascript
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const { merge } = require("webpack-merge");
const commonConfig = require("./webpack.comm.config");
module.exports = merge(commonConfig, {
mode: "production",
output: {
clean: true,
},
plugins: [new CleanWebpackPlugin()],
});