使用 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.0

• NPM：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在这个小小的改变之后，一切都按预期重新加载。