如何强制 Webpack 4 仅检测和重新编译已更改的文件

Question

我添加到项目中的每个文件都会使编译变慢。

保存后重新编译项目达到9秒

我正在使用 Webpect-dev-server 模块重新编译代码。

是否有（并且应该）有一种方法可以告诉 Webpack 只重新编译所做的更改？例如 - 如果我要添加一个 <p>Something small</p> Webpack 只需要重新编译添加的元素。

// package.json 

"webpack": "^4.27.1"
"webpack-cli": "^3.1.2"
"webpack-dev-server": "^3.1.10"

// webpack.config.js

const path = require('path');

module.exports = {
  entry: './entry.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [

  ],
  devServer: {
    contentBase: './dist'
  },
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.(html)$/,
        use: {
          loader: 'html-loader',
          options: {
            attrs: [':data-src']
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};

Answer 1

我使用 require 方法错误地使用了字符串插值。这可能导致 Webpack 无法正确查找所需文件。

这是我所做的：

let pre = `./app/services/`;
let something = require(`${pre}some-service`);

这是修复：

let something = require('./app/services/some-service');

结果：

而不是 10k 毫秒编译 10 个非常简单的文件 - 第一个开发服务器运行时 300 毫秒，主要更改的编译时间为 150-200 毫秒，次要更改仅 30 毫秒。

如何强制 Webpack 4 仅检测和重新编译已更改的文件

How to enforce Webpack 4 to detect and recompile only files that were changed

javascript

compilation

node.js

webpack

webpack-dev-server