使用webpack-dev-server监视本地依赖项

Question

我正在创建一个Javascript库。 在我的项目中，有一个包含如何使用该库的示例的文件夹。 每个示例中都有一个webpack配置文件，其整个目的是打包该示例并通过 webpack-dev-server 进行热重载服务。 这些示例中还将库（在项目根目录中）列为本地NPM依赖项。 我已经使每个示例的热重载工作，并且我已经在观察命令下编译了位于根目录的库。

• 主要问题：是否有一种方法可以让 webpack-dev-server 的热重载器响应对本地NPM依赖项的更改？
• 次要问题：这是否是webpack的默认行为？如果是，那么我的机器/配置文件可能出了什么问题？
• 一般/模糊问题：我做错了吗？ 我觉得本地示例应该更容易提供服务（我也不想使用Storybook，因为我编写的示例不是在React，Vue，Angular等中...而是所有的纯JavaScript）。

这是我的 webpack.config.js 文件：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = (env, argv) => ({
  mode: argv.mode,
  entry: './index.js',
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'index.bundle.js'
  },
  devtool: argv.mode === 'development' ? '#eval-source-map' : 'source-map',
  devServer: {
    port: 8080,
    hot: true,
    open: true,
    stats: {
      children: false, // Hide children information
      maxModules: 0 // Set the maximum number of modules to be shown
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin({ template: './index.html' })]
});

这是我的package.json文件（请注意，syft.js是我想要监视更改的本地依赖项）：

{
  "name": "with-grid",
  "version": "1.0.0",
  "private": true,
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development",
    "build": "rm -rf dist && webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "",
  "devDependencies": {
    "babel-loader": "^8.0.6",
    "html-webpack-plugin": "^3.2.0",
    "path": "^0.12.7",
    "webpack": "^4.39.1",
    "webpack-cli": "^3.3.7",
    "webpack-dev-server": "^3.7.2"
  },
  "dependencies": {
    "syft.js": "file:../.."
  }
}

文件夹结构如下：

dist

- index.js（由Babel生成的文件，package.json指向的文件，也是我想要监视的文件）

examples

- with-grid

- webpack.config.js（上面提到的） - package.json（上面提到的）

src

- index.js（主要源代码文件）

操作系统：MacOS 10.14.6

浏览器：Chrome 76

Node：12.8.0

NPM：6.10.3

Yarn：1.17.3

- cereallarceny

---

请问您能否澄清您想要解决的问题？从我多次阅读您的问题中，看起来好像您已经有了一个有效的解决方案。 - Peter

当然，我已经有一个可以在“with-grid”文件夹中实现热重新加载的工作解决方案。但是，我还想监视“node_modules”文件夹中的文件，特别是“syft.js”库。每当我更改两个目录之外的文件时，它也应该触发重建和重新加载“with-grid”文件夹中该依赖项的操作。 - cereallarceny

webpack 的默认行为应该是监视所有文件的更改，包括 node_modules。但可以尝试这样做：在主配置中将 watch 标志设置为 true，然后使用 watchOptions 链接。 - ambianBeing

Answer 1

我选择了一种不同的策略，现在看来非常明显。与其将我的库视为需要解析的本地节点依赖项，我可以简单地在本地导入它。

当从我的示例文件夹导入时，我这样做: import syft from '../../src'; // 类似于相对文件 而不是: import syft from 'syft.js'; // 类似于NPM包 经过这个小改变，一切都按预期重新加载。

- cereallarceny

Answer 2

你可以使用npm link在React应用和本地依赖之间创建符号链接。只需确保构建本地依赖以触发React应用中的重新加载。

1. 你的本地依赖应该在package.json中有"main"和"name"属性。webpack-dev-server将根据"main"中的更改进行重新加载

{
  "name": "my-dep",
  "main": "lib/index.js",
}

2. 在依赖项 package.json 旁边运行 npm link。
3. 在您的 React 项目中运行 npm link my-dep - 它将在两个项目之间创建符号链接。
4. 在您的 React 项目中导入 my-dep，并且当您更改 lib/index.js 时，将触发重新加载。

您可以在此处阅读更多信息 https://medium.com/dailyjs/how-to-use-npm-link-7375b6219557 npm link: https://docs.npmjs.com/cli/link

- Barak