第四节：Webpack本地服务器搭建、剖析devServer的HRM热替换和其它配置、resolve模块解析、区分开发/生产环境方案实战

一. webpack本地服务器搭建

1. 为什么要搭建本地服务器？

　我们之前通过【npm run build】，编译相关的代码； 然后需要在浏览器中运行，每次修改修改代码，都需要重新编译运行，很麻烦。我们希望可以做到，当文件发生变化时，可以自动的完成 编译 和 展示 。

2. watch mode模式

(1). 简介

　　在该模式下，webpack依赖图中的所有文件，只要有一个发生了更新，那么代码将被重新编译；我们不需要手动去运行 npm run build指令了；

(2). 配置

方法1：babel.config.js增加下面配置

module.exports = {
    mode: "development",
    watch:true,     //开启监听
    entry: "./src/main.js"
}

方法2：在package.json中增加下面配置

  "scripts": {
    "build": "webpack --watch"
  },

结果剖析：

　　通过【npm run build】打包，运行index.html，这个时候在修改一下代码，自动编译映射。

　　上述watch mode，可以监听到文件的变化，但是事实上它本身是没有自动刷新浏览器的功能的： 我们希望在不使用live-server(vs code插件)的情况下，可以具备live reloading（实时重新加载）的功能 ，这个使用就需要用下面的dev-server模式。

3. dev-server模式(推荐)

(1). 步骤

　A. 安装loader：【npm install webpack-dev-server -D】

　B. 修改babel.config.js中的配置，增加target节点 、devServer节点。

// 这里必须通过 commonjs的写法配置，不能写 ES6的写法
const path = require('path');

module.exports = {
    target: "web",
    mode: "development", // 设置模式， development 开发阶段, 会设置development, production 准备打包上线的时候, 设置production（默认）
    entry: "./src/main.js", //入口文件
    output: {
        path: path.resolve(__dirname, "./build"), //打包后存放路径, 必须写绝对路径
        filename: "bundle.js" //打包后的文件名称
    },
    devServer: {
        static: {
            directory: path.join(__dirname, 'public'),
        },                                              //表示从这个文件夹里找打包后没有找到的文件（打包是打src文件夹）
    },
    module: {
   
    },
}

　C. 修改package.json中的配置，script标签中增加serve节点。

  "scripts": {
    "build": "webpack",
    "serve": "webpack serve"
  },

　D. 运行指令【npm run serve】，然后访问 http://localhost:8080/ ，然后F12打开调试器，修改代码，发现页面自动刷新了，输出最新的结果了。

(2). 剖析 

    webpack-dev-server 在编译之后不会写入到任何输出文件（不会生成build文件夹），而是将 打包后 文件保留在内存中。

　事实上webpack-dev-server使用了一个库叫memfs（memory-fs webpack自己写的） 。

二. dev-server的热替换

1. 简介

PS：

　　特别是当页面有计数器的情况下，HMR更加适合，因为不需要刷新整个页面，计数器就不会被重置。

2. 如何配置

(1). babel.config.js中的配置

devServer: {
        hot: true,
}

(2). 需要动态指定哪个模块需要HMR

hmr.js代码如下：

console.log('hmr11111122333');

导入main.js中(必须先import导入，再配置)

// 测试HMR
import '@js/hmr';
if (module.hot) {
  module.hot.accept("./js/hmr.js", () => {
    console.log("hmr模块发生更新了");
  })
}

(3). 运行结果

3. HMR的原理

(1). 说明

　　vue开发中，我们使用vue-loader，此loader支持vue组件的HMR，提供开箱即用的体验；不需要单独配置module.hot.accept

(2). 原理剖析

三. dev-server的其它配置

（更多配置参考官网：https://webpack.js.org/configuration/dev-server/）

1. 基本配置

(1). static→directory：用于设置后打包后寻找静态资源的文件夹

(2). hot：设置为true，开启热替换。

(3). host：设置主机地址，默认值为localhost

(4). port：设置监听的端口，默认情况下是8080

(5). open：是否打开浏览器。 默认值是false，设置为true会打开浏览器。

(6). compress：是否为静态文件开启gzip compression： 默认值是false，可以设置为true；

分享完整节点：

module.exports = {
    target: "web",
    devServer: {
        static: {
            directory: path.join(__dirname, 'public'), //表示从这个文件夹里找打包后没有找到的文件（打包是打src文件夹）
        },
        hot: true,
        host: "localhost",
        port: 9999,
        open: true,
        compress: true
    },
}

补充几个本地地址的区别：

2. 代理配置

(1). 简介 

　proxy是我们开发中非常常用的一个配置选项，它的目的设置代理来解决跨域访问的问题：

　A. 比如我们的一个api请求是 http://localhost:8888，但是本地启动服务器的域名是 http://localhost:8000，这个时候发送网络请求就会出现跨域的问题；

　B. 那么我们可以将请求先发送到一个代理服务器，代理服务器和API服务器没有跨域的问题，就可以解决我们的跨域问题了；

PS：在实际开发中，跨域问题通常要配合服务器端一起解决，比如服务器端设置cors等等。

(2). 常用配置  

　target：表示的是代理到的目标地址，比如 /api-hy/moment会被代理到 http://localhost:8888/api-hy/moment；

　pathRewrite：默认情况下，我们的 /api-hy 也会被写入到URL中，如果希望删除，可以使用pathRewrite；

　secure：默认情况下不接收转发到https的服务器上，如果希望支持，可以设置为false；

　changeOrigin：它表示是否更新代理后请求的headers中host地址；

　historyApiFallback是开发中一个非常常见的属性，它主要的作用是解决SPA页面在路由跳转之后，进行页面刷新时，返回404的错误。boolean值：默认是false。如果设置为true，那么在刷新时，返回404错误时，会自动返回 index.html 的内容；object类型的值，可以配置rewrites属性（了解）：可以配置from来匹配路径，决定要跳转到哪一个页面；

完整代码： 

devServer: {
        static: {
            directory: path.join(__dirname, 'public'), //表示从这个文件夹里找打包后没有找到的文件（打包是打src文件夹）
        },
        hot: true,
        host: "localhost",
        port: 9999,
        open: true,
        compress: true,
        // 下面是代理相关的配置
        proxy: {
            "/api": {
                target: "http://localhost:8888",
                pathRewrite: {
                    "^/api": ""
                },
                secure: false,
                changeOrigin: true
            }
        }
    },

四. resolve模块解析

1. 背景

　在开发中我们会有各种各样的模块依赖，这些模块可能来自于自己编写的代码，也可能来自第三方库；

　resolve可以帮助webpack从每个 require/import 语句中，找到需要引入到合适的模块代码；

　webpack 使用 enhanced-resolve 来解析文件路径；

2. webpack识别的3中路径

(1). 绝对路径

　由于已经获得文件的绝对路径，因此不需要再做进一步解析。

(2). 相对路径

　在这种情况下，使用 import 或 require 的资源文件所处的目录，被认为是上下文目录；

　在 import/require 中给定的相对路径，会拼接此上下文路径，来生成模块的绝对路径；

(3). 模块路径

　在 resolve.modules中指定的所有目录检索模块；

　A. 默认值是 ['node_modules']，所以默认会从node_modules中查找文件； 

　B. 我们可以通过设置别名的方式来替换初识模块路径，后面讲解alias的配置；

3. 区分文件 or 文件夹

(1). 如果是一个文件：

　　A. 如果文件具有扩展名，则直接打包文件；

　　B. 否则，将使用 resolve.extensions选项作为文件扩展名解析；（默认情况下，.js/wasm/mjs/json结尾的可以不用写后缀）

(2). 如果是一个文件夹：

　　会在文件夹中根据 resolve.mainFiles配置选项中指定的文件顺序查找；

　　A. resolve.mainFiles的默认值是 ['index']；

　　B. 再根据 resolve.extensions来解析扩展名；

4. 代码配置（重要）

(1). extensions是解析到文件时自动添加扩展名：

　　默认值是 ['.wasm', '.mjs', '.js', '.json']；所以如果我们代码中想要添加加载 .vue 或者 jsx 或者 ts 等文件时，我们必须自己写上扩展名；

(2). 配置别名alias：

　　特别是当我们项目的目录结构比较深的时候，或者一个文件的路径可能需要 ../../../这种路径片段；我们可以给某些常见的路径起一个别名；

配置分享

    resolve: {
        extensions: [".js", ".json", ".mjs", ".vue", ".ts", ".jsx", ".tsx"],   //vue ts jsx tsx 是自己添加的后缀
        alias: {
            "@": path.resolve(__dirname, "./src"),
            "@js": path.resolve(__dirname, "./src/js")
        }
    },

代码实战改写 

// commonjs的导入
// const { getPrice } = require('./js/t1');
// 配置resolve后的写法
const { getPrice } = require('@js/t1');

// ES6的导入
// import { sum } from './js/t2.js';
// 配置resolve后的写法
import { sum } from '@js/t2';

// 导入创建html的js
// import './js/createHtml.js';
// 配置resolve后的写法
import '@js/createHtml';

// 导入需要babel转换的js文件
// import './js/ypf1.js';
// 配置resolve后的写法
import '@js/ypf1';// 调用vue相关
import {createApp} from 'vue';
// import App from './vue/App.vue';
// 配置resolve后的写法
import App from '@/vue/App';

五. 区分开发/生产环境实战

1. 实现思路

　编写多个的配置文件，开发和生成时，分别加载不同的配置文件即可。

2. 实现步骤

(1). 通过指令安装下面程序，用于合并js文件

 【npm install webpack-merge -D】

(2). 在config目录下新建3个js文件：

webpack.common.conf.js (公共的)

// 这里必须通过 commonjs的写法配置，不能写 ES6的写法
const path = require('path');
// 导入插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { DefinePlugin } = require("webpack");
const { VueLoaderPlugin } = require('vue-loader/dist/index');

module.exports = {
    target: "web",
    entry: "./src/main.js", //入口文件
    output: {
        path: path.resolve(__dirname, "../build"), //打包后存放路径, 必须写绝对路径
        filename: "bundle.js" //打包后的文件名称
    },
    resolve: {
        extensions: [".js", ".json", ".mjs", ".vue", ".ts", ".jsx", ".tsx"], //vue ts jsx tsx 是自己添加的后缀
        alias: {
            "@": path.resolve(__dirname, "../src"),
            "@js": path.resolve(__dirname, "../src/js")
        }
    },
    module: {
        rules: [{
                test: /.css$/, //（表示所有的css结尾的文件都进行匹配）
                use: ["style-loader", "css-loader"]
            },
            {
                test: /.less$/, //（表示所有的less结尾的文件都进行匹配）
                use: ["style-loader", "css-loader", "less-loader"]
            },
            // 文件解析功能，"asset/resource"（等价于file-loader ）
            {
                test: /.(jpe?g|png|gif|svg)$/,
                type: "asset/resource",
                generator: {
                    filename: "img/[name]_[hash:6][ext]"
                }
            },
            // 解析字体(也可以用file-loader处理)
            {
                test: /.(eot|ttf|woff2?)$/,
                type: "asset/resource",
                generator: {
                    filename: "font/[name]_[hash:6][ext]"
                }
            },
            // Vue解析打包
            {
                test: /.vue$/,
                loader: "vue-loader"
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            title: "hello webpack"
        }),
        new DefinePlugin({
            BASE_URL: "'./'",
            __VUE_OPTIONS_API__: true,
            __VUE_PROD_DEVTOOLS__: false
        }),
        new VueLoaderPlugin()
    ]
}

注意：

　　(1). entry: "./src/main.js", 入口文件的位置，不需要改成 ../src/main.js，因为入口文件其实是和另一个属性时有关的 context，默认应该是webpack的启动目录（当前路径）

　　(2). 其它的地方需要相应的改变路径，比如：path: path.resolve(__dirname, "../build"),

webpack.dev.conf.js(开发时用)

const path = require('path');
const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.common.conf');

module.exports =merge(commonConfig, {
    mode: "development", // 设置模式， development 开发阶段, 会设置development, production 准备打包上线的时候, 设置production（默认）
    devtool: "source-map", // 设置source-map, 建立js映射文件, 方便调试代码和错误(配合上面的development)
    devServer: {
        static: {
            directory: path.join(__dirname, 'public'), //表示从这个文件夹里找打包后没有找到的文件（打包是打src文件夹）
        },
        hot: true,
        host: "localhost",
        port: 9999,
        open: true,
        compress: true,
        // 下面是代理相关的配置
        // proxy: {
        //     "/api": {
        //         target: "http://localhost:8888",
        //         pathRewrite: {
        //             "^/api": ""
        //         },
        //         secure: false,
        //         changeOrigin: true
        //     }
        // }
    },
})

注意：

　　需要合并webpack.common.conf.js　　

webpack.pro.conf.js(生产时用)。

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.common.conf');

module.exports =merge(commonConfig, {
    mode: "production", // 设置模式， development 开发阶段, 会设置development, production 准备打包上线的时候, 设置production（默认）
    plugins: [
        new CleanWebpackPlugin(),
        new CopyWebpackPlugin({
            patterns: [{
                from: "public", //设置从哪一个源中开始复制；
                // to: "./",    //复制到的位置，可以省略，会默认复制到打包的目录下；
                globOptions: { //下面配置忽略清单
                    ignore: [
                        "**/index.html"
                    ]
                }
            }]
        }),
    ]
})

注意：

　　需要合并webpack.common.conf.js　　

(3). 在package.json中修改相关指令的调用文件

  "scripts": {
    "build": "webpack --config ./config/webpack.pro.conf.js",
    "serve": "webpack serve --config ./config/webpack.dev.conf.js"
  },

(4). 测试 

 　【npm run build】打包

　【npm run serve】开发运行

 

 

!

• 作       者 : Yaopengfei(姚鹏飞)
• 博客地址 : http://www.cnblogs.com/yaopengfei/
• 声     明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
• 声     明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。