在项目开发过程中,如果每次改动代码之后都要刷新浏览器才能获得最新的表现,体验不是很好。这个时候我们就需要用到实时打包编译的功能,webpack-dev-server可以帮助我们:
安装webpack-dev-server
调出终端输入命令cnpm i webpack-dev-server -D
,安装过程如下:
为了在node开发环境下快速启动webpack-dev-server,我们在package.json的“scripts”
中添加"dev": "webpack-dev-server --open --port 3000"
。--open
的作用是在每次启动服务时自动打开目录,--port
指定端口号。
此时运行npm run dev
默认打开的是项目根目录,需要手动点击src
目录打开主页,如果想启动服务时自动打开主页,需要配置html-webpack-plugin
。
配置html-webpack-plugin
调出终端输入命令cnpm i html-webpack-plugin -D
,安装该插件。安装完成之后在webpack.config.js
中进行配置,下面给出其中的代码:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebpackPlugin({
template: path.join(__dirname, "./src/index.html"),
filename: "index.html"
});
module.exports = {
mode: "development",
// mode: "production"
plugins: [
htmlPlugin
]
};
注意事项
- 启动服务之后main.js与index.html都是在内存中的,不对应到物理磁盘,这样避免了频繁的磁盘读写,而且内存的读取速度更快。
- 不需要在index.html中手动引入打包完成的main.js,实时打包完毕之后会向内存中的index.html结尾自动追加main.js。
- 在项目开发过程中,每对代码做一次改动(包括index.html,main.js以及将来更多的源文件)并按下
Ctrl+S
,实时打包编译程序就会将打包好的效果呈现到浏览器,开发体验非常好。 - 如果想终止
webpack-dev-server
服务,在终端使用快捷键Ctrl+C
,根据提示再按下Y
即可。 - 项目开发完毕后在终端输入
npx webpack
即可将main.js
以及index.html
打包到dist
目录下。