自动重新打包

在webpack后加上--watch可以持续监听改变。

使用webpack-dev-server

可以用这个工具完成自动打包和假设服务。

它为了提高效率，会将结果放入内存而非硬盘。

安装

npm i webpack-dev-server -D

配置。配置要写在webpack的配置里。

const path = require("path");

module.exports = {
  devServer: {
    host: "localhost",
    port: "3000",
    // 设置代理
    proxy: {
      '/api': {
        // 替换的域名
        target: 'http://localhost',
        pathRewrite: { '^/api': '' },
        // 如果不加下面这句，请求头origin仍会是原始host，而不是上面设置的target
        changeOrigin: true
      }
    }
    // open: true, // 是否自动打开浏览器
    contentBase: ['public'] // 可以是路径或者数组。webpack5中改为了static
  }
}

如果配置了服务器，那么启动命令就要更换为

npx webpack serve [--open]

如果写了--open，那么会自动使用浏览器打开页面。命令行里不写也可以在配置文件中写出。