我正在创建一个Javascript库。 在我的项目中,有一个包含如何使用该库的示例的文件夹。 每个示例中都有一个webpack配置文件,其整个目的是打包该示例并通过
文件夹结构如下:
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
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
webpack
的默认行为应该是监视所有文件的更改,包括node_modules
。但可以尝试这样做:在主配置中将watch
标志设置为true
,然后使用watchOptions
链接。 - ambianBeing