webpack-dev-server与html-webpack-plugin的基本使用

在项目开发过程中，如果每次改动代码之后都要刷新浏览器才能获得最新的表现，体验不是很好。这个时候我们就需要用到实时打包编译的功能，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
    ]
};

注意事项

1. 启动服务之后main.js与index.html都是在内存中的，不对应到物理磁盘，这样避免了频繁的磁盘读写，而且内存的读取速度更快。
2. 不需要在index.html中手动引入打包完成的main.js，实时打包完毕之后会向内存中的index.html结尾自动追加main.js。
3. 在项目开发过程中，每对代码做一次改动（包括index.html，main.js以及将来更多的源文件）并按下Ctrl+S，实时打包编译程序就会将打包好的效果呈现到浏览器，开发体验非常好。
4. 如果想终止webpack-dev-server服务，在终端使用快捷键Ctrl+C，根据提示再按下Y即可。
5. 项目开发完毕后在终端输入npx webpack即可将main.js以及index.html打包到dist目录下。