Как посмотреть изменения в другом модуле?

В моей конфигурации webpack у меня есть несколькоresolve.root, чтобы рассматривать каждую папку активов как независимый модуль. Поскольку я разрабатываю свои активы как отдельные модули, я хотел бы наблюдать за изменениями, сделанными в них.

Образец webpack.config.js:

var path = require('path')
module.exports = {
  resolve: {
    root: [
      './proj1/assets/',
      './proj2/assets/',
    ],
  },
  entry: {
    'app1': './proj1/assets/app1'
  },
  output: {
    path: path.join(__dirname, 'dist/proj1'),
    filename: '[name].js',
  }
})

Пусть awesomeappэкспорт a AwesomeComponentи может быть разрешен из proj2/assets.

// File: proj1/assets/app1.js
import { AwesomeComponent } from 'awesomeapp'
// ^The above import will not watch changes in `AwesomeComponent`

// BUT with relative import, webpack will watch it.
import { AwesomeComponent } from '../../proj2/assets/awesomeapp'
// ^The above import will watch changes in `AwesomeCompoent`

Как внести webpack --watchизменения в такой импорт?


Упомянутые в учебнике:
https://webpack.github.io/docs/tutorials/getting-started/#watch-mode

При использовании режима просмотра webpack устанавливает наблюдатели файлов во все файлы, которые использовались в процессе компиляции. При обнаружении каких-либо изменений компиляция будет запущена снова. Когда кэширование включено, webpack сохраняет каждый модуль в памяти и будет повторно использовать его, если он не будет изменен.

1 ответ

  1. resolve.root нужен абсолютный путь, а не относительный. Так,

    resolve: {
      root: [
        path.resolve('./proj1/assets/'),
        path.resolve('./proj2/assets/'),
      ],
    },
    

    Таким образом, импорт модуля будет отслеживаться снова.