更改文件后如何重新编译webpack？

在使用Webpack进行项目构建时，如果您更改了项目中的文件，重新编译通常有以下几种方法：

1. 手动重新编译

如果您是通过命令行启动Webpack的，可以在修改完文件后，再次运行相同的构建命令。例如，如果您的构建命令是：

bash
webpack --config webpack.config.js

修改文件后，只需再次运行这个命令即可。

2. 使用webpack --watch

Webpack提供了一种自动监控文件变化并重新编译的方式，即--watch选项。在启动Webpack时加上这个选项：

bash
webpack --watch --config webpack.config.js

这样，每当您保存更改的文件时，Webpack会自动检测到文件变化，并重新编译。

3. 使用webpack-dev-server

webpack-dev-server是一个小型的Express服务器，它使用webpack-dev-middleware来服务于Webpack的包，并自动重新编译和刷新浏览器。要使用这个方法，您首先需要安装webpack-dev-server：

bash
npm install webpack-dev-server --save-dev

然后可以在命令行中启动服务器：

bash
webpack-dev-server --config webpack.config.js

或者在您的webpack.config.js中配置devServer选项，并通过npm脚本启动它：

javascript
// webpack.config.js
module.exports = {
  //...
  devServer: {
    contentBase: './dist',
    hot: true
  },
  //...
};

// package.json
{
  "scripts": {
    "start": "webpack-dev-server --open"
  }
}

然后运行：

bash
npm start

这个命令不仅会自动为您编译文件，还会自动打开浏览器并加载您的应用程序。

示例

假设您正在开发一个React应用程序，并且您已经安装了所有必要的依赖。您的webpack.config.js可能看起来像这样：

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

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  devServer: {
    contentBase: './dist',
    hot: true
  }
};

在这种配置下使用webpack-dev-server将使您的开发流程更加便捷，因为它会在您每次保存文件时自动编译JavaScript和HTML，并立即在浏览器中反映出来。

以上就是几种Webpack重新编译的方法，根据您的具体需求选择合适的方法。