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

Question

我正在创建一个 Javascript 库。在我的项目中有一个文件夹，其中包含如何使用该库的示例。每个示例中都有一个 webpack 配置文件，其全部目的是捆绑该示例并通过热重载通过 webpack-dev-server 提供服务。这些示例中的每一个都将库(位于项目的根目录)列为本地 NPM 依赖项。我对每个示例都进行了热重载，并且我让 babel 在 watch 命令的根目录下编译了库。

• 主要问题:有没有办法让 webpack-dev-server 的热重载器响应本地 NPM 依赖项的更改？
• 第二个问题:这是 webpack 的默认行为吗？如果是这样，我的机器/配置文件可能有什么问题？
• 一般性/模糊问题:我这样做错了吗？我觉得提供本地示例应该更容易(我对使用 Storybook 也不感兴趣，因为我正在编写的示例不是用 React、Vue、Angular 等编写的......这都是直接的 Vanilla 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(主源文件)

<小时/>

• 操作系统:MacOS 10.14.6
• 浏览器:Chrome 76
• 节点:12.8.0
• NPM:6.10.3
• yarn :1.17.3

Answer 1

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

从示例文件夹导入时，我会:

从 '../../src' 导入 syft;//就像相对文件

而不是:

从 'syft.js' 导入 syft；//就像 NPM 包

经过这个小小的更改，一切都会按预期重新加载。