javascript - 如何强制 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 毫秒。