Блог

В моей конфигурации 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 экспортирует 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 сохраняет каждый модуль в памяти и будет повторно использовать его, если он не будет изменен.

resolve.root требуется абсолютный путь, А НЕ относительный путь. Итак,

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

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