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 ms即可编译10个非常简单的文件- 首次开发服务器运行时为300毫秒，主要更改为150-200毫秒的编译时间，仅次要更改为30毫秒。

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

1 个答案: