Webpack 运行服务与重载

使用 webpack 之类的工具时,最好在本地模拟真实的服务器环境,而不是处理 file:// 协议。 你可能已经为此设置了一些环境(例如,我使用 XAMPP,因为我经常使用 PHP 和 WordPress)。 但是 webpack 为我们提供了在需要时轻松安装带有实时重新加载的服务器的选项。

目前,我们每次进行更改时都需要重新构建代码。 幸运的是,webpack 提供了一个实时重新加载的 web 服务器 - webpack-dev-server,它可以自动构建和刷新页面。 要安装它,请运行以下命令:

$ npm install webpack-dev-server --save-dev

webpack 安装服务成功

我们需要更新 package.json 中的 dev 脚本,从而使其可以使用我们安装的服务器:

"dev": "webpack serve --mode development"

接下来让我们在 webpack.config.js 文件中的 output 选项的后面添加如下的内容,对服务器进行配置

devServer: {
  contentBase: './deploy',
  open: true
},

完整的配置文件如下

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require('path');

module.exports = {
    entry: {
        main: path.resolve(__dirname, './src/app.js'),
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'deploy')
    },
    devServer: {
        contentBase: './deploy',
        open: true
    },
    module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }
          },
          { 
            test: /\.css$/, 
            use: ["style-loader", "css-loader"] 
          },
          { 
            test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
            type: 'asset/resource',
          },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Webpack - 迹忆客(jiyik.com)',
        })
    ],
};

这告诉 webpack-dev-server 从 deploy 目录提供文件并自动打开入口页面。

现在,如果我们运行 webpack (npm run dev),我们应该会看到页面是如何在浏览器中自动打开的,url地址为 http://localhost:8080

$ npm run dev

注意:运行 webpack-dev-server 后,deploy 文件夹中将找不到任何文件(它将是空的),因为服务器在编译后不会写入任何输出文件。 相反,它将捆绑文件保存在内存中,并将它们视为安装在服务器根路径上的真实文件。

webpack dev-server 运行

如果我们现在更改任何源文件并保存它们,Web 服务器将在代码编译后自动重新加载页面。 例如,尝试将 CSS 文件中的颜色属性更改为绿色,您应该会看到页面中的文本颜色是变成绿色的。

style.css

h1 {
    color: green;
  }

webpack 服务修改文件自动重启服务

查看笔记