使用 webpack-dev-server 观察本地依赖

Question

我正在创建一个 Javascript 库。在我的项目中有一个文件夹，其中包含如何使用库的示例。在每个示例中都有一个 webpack 配置文件，其全部目的是捆绑该示例并通过webpack-dev-server热重载来提供它。这些示例中的每一个都将库（位于项目的根目录）列为本地 NPM 依赖项。我对每个示例都进行了热重载，并且我使用 babel 在根目录下通过 watch 命令编译了库。主要问题：有没有办法让热重载器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:../.."  }}文件夹结构是这样的：区index.js（babel生成的文件，package.json指向什么，我想被观看的文件）例子webpack.config.js（参考上面）package.json（参考上面）带网格源文件index.js（主 src 文件）操作系统：MacOS 10.14.6浏览器：Chrome 76节点：12.8.0NPM：6.10.3纱线：1.17.3

Answer 1

我选择了一种不同的策略，现在回想起来似乎非常明显。而不是将我的库视为需要解决的本地节点依赖项，我可以简单地在本地导入它。

从我的示例文件夹导入时，我执行以下操作：

import syft from '../../src';  // Like a relative file

代替：

import syft from 'syft.js';  // Like an NPM package

在这个小小的改变之后，一切都按预期重新加载。