webpack 学习笔记系列05-devserver

Write By CS逍遥剑仙我的主页: csxiaoyao.com GitHub: github.com/csxiaoyaojianxian Email: sunjianfeng@csxiaoyao.com QQ: 1724338257

1. Webpack Dev Server

1.1 命令行使用

webpack-dev-server 是一个小型的 express 服务器，它通过 express 的中间件 webpack-dev-middleware 和 webpack 进行交互。

代码语言：txt复制

# 项目中安装 webpack-dev-server
$ npm i webpack-dev-server
# 使用 npx 启动
$ npx webpack-dev-server

启动后读取 webpack 配置文件并将打包到内存中。建议将命令写到 package.json 中，同时支持使用选项参数：

代码语言：txt复制

# 修改 port 和 host
$ webpack-dev-server --port 3000 --host 127.0.0.1
# 启动 inline 模式的自动刷新
$ webpack-dev-server --hot --inline
# 使用监听
$ webpack-dev-server --watch
# 指定 webpack config 文件
$ webpack-dev-server --config webpack.xxx.js
# 指定 webpack mode
$ webpack-dev-server --mode development
# 手动修改工作目录为非当前目录
$ webpack-dev-server --content-base ./dist

Tips: webpack-dev-server 支持两种模式的自动刷新页面：iframe 和 inline iframe：页面放到一个 iframe 内，内容变化页面重新加载 inline：将 webpack-dev-server 重载代码添加到产出的 bundle 中，相比 iframe 方式不用刷新整个页面

1.2 HMR（Hot Module Replacement）

Webpack 可以通过配置 webpack.HotModuleReplacementPlugin 插件来开启全局 HMR，可以在不刷新页面的情况下，直接替换、增删模块。

代码语言：txt复制

const path = require('path');
module.exports = {
    entry: './src/index.js',
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        port: 8080,
      	// 开启 hmr 支持，相当于命令行 --hot
        hot: true
    },
    plugins: [
        // 添加 hmr 插件，若命令行添加 --inline 则可以自动配置
        new webpack.HotModuleReplacementPlugin()
    ]
};

执行 webpack-dev-server，打开 http://localhost:8080 ，当 index.js 修改时能实时看到修改结果。

1.3 proxy 代理

devServer.proxy 可以解决本地开发跨域的问题。

代码语言：txt复制

module.exports = {
    devServer: {
        // case1: /api/users => http://csxiaoyao.com/api/users
        proxy: {
            '/api': 'http://csxiaoyao.com'
        },
        // case2: /api/users => https://csxiaoyao.com/users
        proxy: {
            '/api': {
                target: 'http://csxiaoyao.com',
                pathRewrite: { '^/api': '' },
              	secure: false
            }
        },
        // case3: 代理绕过 html 资源文件请求
      	proxy: {
            '/api': {
                target: 'http://csxiaoyao.com',
                bypass(req, res, proxyOptions) {
                    // 判断请求头中的 accept 值 
                    if (req.headers.accept.indexOf('html') !== -1) {
                        // 返回 contentBase 的路径
                      	// return xxx
                    }
                }
            }
        },
      	// case4: 只代理 /api 和 /auth 两个地址，其余放行
        proxy: [{
            context: ['/auth', '/api'],
            target: 'http://csxiaoyao.com'
        }]
    }
};

1.4 自定义中间件 & mock server

在 webpack-dev-server 加载所有内部中间件之前和之后可以通过 devServer.before 和 devServer.after 实现自定义中间件。

代码语言：txt复制

module.exports = {
    devServer: {
        before(app, server) {
          	// 设置 mock 数据，http://localhost:8080/api/mock.json
            app.get('/api/mock.json', (req, res) = > {
                res.json({ text: 'hello world' });
            });
        },
  			after(app, server) {
        		// ... 
        }
    }
};