Question

在我的webpack配置中，我有multiple 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会将每个模块保留在内存中，并在未更改时重复使用。

Answer 1

resolve.root需要绝对路径，而不是相对路径。所以，

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

因此，将再次观看模块导入。

如何观看另一个模块的更改？

1 个答案: