跳到主要内容位置

使用webpack搭建脚手架(三)

· 预计阅读时间:6分钟
hec9527

之前的案例我们讲解了 webpackd 的基本用法,但是介于每次改动内容都需要手动打包内容,实在是太麻烦了。现在我们尝试使用 webpack 搭建开发服务器

链接: Github 首页

系列文章

使用 webpack 开发服务器

现在我们按照以下步骤重新创建一个项目

# 初始化npm包
npm init -y
# 安装webpack相关依赖
npm i -D webpack webpack-cli webpack-dev-server
# 安装html模板插件
npm i -D html-webpack-plugin
危险

使用webpack-dev-server v4+ 需要 node >= v12.13.0webpack >= v4.37.0

简单修改一下 webpack 配置

webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

/** @type {import("webpack").Configuration} */
const config = {
mode: 'production',

entry: './src/index.js',

output: {
path: path.resolve(__dirname, './dist/'),
filename: 'bundle.[contenthash:4].js',
},

plugins: [new HtmlWebpackPlugin()],
};
module.exports = config;

接着我们添加一下入口文件

src/index.js
document.body.innerHTML = 'hello world';

添加一下 npm 命令, 以下两个命令的效果是相同的,webpack4 及以前的版本主要使用的是下面的方式启动开发服务器,webpack5 现在也支持webpack server的方式启动

"scripts": {
"dev": "webpack server",
"dev:server": "webpack-dev-server"
}

运行一下npm run dev查看终端的日志发现,程序并没有立即结束,在浏览器中打开 webpack 启动的地址(下面三个随便选一个都行),页面中应该会有一个hello world。如果我们修改入口函数的内容,比如将'hello world'修改为'hello hec9527'然后保存,这时候 webpack 会自动重新打包然后刷新页面

➜  demo-02 git:(blog-demo)npm run dev

> demo-02@1.0.0 dev /Users/hec9527/code/webpack-dev/demo-02
> webpack server

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://172.30.4.83:8080/
<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/Users/hec9527/code/webpack-dev/demo-02/public' directory
asset bundle.567a.js 125 KiB [emitted] [immutable] [minimized] (name: main) 1 related asset
asset index.html 221 bytes [emitted]
runtime modules 27.1 KiB 13 modules
orphan modules 14.1 KiB [orphan] 7 modules
cacheable modules 197 KiB
modules by path ./node_modules/webpack-dev-server/client/ 51.1 KiB
modules by path ./node_modules/webpack-dev-server/client/modules/ 30.2 KiB 2 modules
3 modules
modules by path ./node_modules/webpack/hot/*.js 4.3 KiB 4 modules
modules by path ./node_modules/html-entities/lib/*.js 81.3 KiB 4 modules
modules by path ./node_modules/url/ 37.4 KiB 3 modules
modules by path ./node_modules/querystring/*.js 4.51 KiB 3 modules
./src/index.js 41 bytes [built] [code generated]
./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
./node_modules/events/events.js 14.5 KiB [built] [code generated]
webpack 5.52.0 compiled successfully in 1956 ms

至此,使用 webpack 搭建开发服务器就已经完成了。但是如果我想配置开发服务器该怎么办,比如我想要修改开发服务器的端口或则其它配置。

wepback 开发服务器的配置

开发服务器通常使用默认配置就 ok 了,完整的配置可以参考webpack 官网开发服务器配置指南

这里简单讲解一下代理和常用的配置

首先我们使用 express-generator 快速搭建一个 express 应用

# 全局安装依赖
npm install -g express-generator
# 创建目录(如果是window可以手动创建然后进入目录)
mkdir server && cd server
# 初始化express项目
express
# 安装epxress项目依赖
npm install
# 启动express项目
npm start

当我们启动项目后没有报错,在浏览器中打开 http://localhost:3000 页面显示 Express 则表示服务器已经成功启动了。接下来我们简单修改一下 webpack 配置

webpack.config.js
const config = {
// 省略部分内容 ...

devServer: {
historyApiFallback: true, // 当使用H5 的 history Api做前端路由的时候,任何404页面都会重定向到 inde.html 页面
host: 'localhost', // 开发服务器启动的地址,通常不用设置或者设置为localhost
port: '10086', // 开发服务器的端口,通常不用设置
hot: true, // 模块热替换,在更新部分模块的时候,应用新代码的时候页面不会刷新,页面的状态得以保留
open: true, // 开发服务器启动后自动在浏览器中打开地址
proxy: {
'/api': 'http://localhost:3000', // 现在对以 /api 开头的请求会代理到 'http://localhost:3000'
},
},

plugins: [new HtmlWebpackPlugin()],
};

我们在 src/index.js 中添加一段代码,验证是否已经成功代理

fetch('/api/users').then((res) => {
console.log(res);
document.body.innerText = res;
});

刷新浏览器后,查看查看浏览器 console 控制台,已经成功打印出请求的结果,并且 express 服务器也成功的打印出了请求日志,这表示我们的代理已经成了,但是查看浏览器的 network 面板,请求的地址还是 http://localhost:10086/api/users 并没有什么变化,这是因为代理实在开发服务器中进行的,浏览器实际请求的还是开发服务器。

提示

如果在代理后的请求中,不需要 /api,可以通过下面你的方式重写代码方式

proxy: {
'/api': {
target: 'http://localhost:3000',
pathRewrite: { '^/api': '' },
},
},