在监视期间不输出对 webpack 库中导入文件的更改答案

【问题标题】：Changes to imported files in webpack library not output during watch在监视期间不输出对 webpack 库中导入文件的更改
【发布时间】：2021-04-04 10:57:07
【问题描述】：

我有一个webpack 5.26编译的小型JS项目，结构如下：

>dist
>src
  >js
    >classes
      carousel.js
      navBar.js
    neso.src.js
  >scss

运行npm run watch 时，在初始构建后不会输出在navBar.js 或carousel.js 中所做的更改。输出scss 文件夹和neso.src.js 中的文件所做的更改。

这些事件的命令行输出如下所示：

assets by status 72.1 KiB [cached] 1 asset
cached modules 56.1 KiB (javascript) 997 bytes (runtime) [cached] 16 modules
webpack 5.26.0 compiled successfully in 131 ms

我已尝试添加watchOptions 属性并更改webpack.config.js 中的entry 属性值。我也尝试过更改 neso.src.js 中的导入/导出声明，但没有任何帮助，classes 文件中的更改仍然没有在手表上输出。请您建议如何实现这一目标。

package.json

{
  "name": "Neso-test",
  "version": "0.0.1",
  "description": "",
  "private": true,
  "main": "dist/neso.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "cross-env NODE_ENV=development webpack",
    "build": "cross-env NODE_ENV=production webpack",
    "watch": "cross-env NODE_ENV=development webpack --watch --progress",
    "serve": "cross-env NODE_ENV=development webpack serve"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/preset-env": "^7.13.10",
    "babel-loader": "^8.2.2",
    "cross-env": "^7.0.3",
    "css-loader": "^5.1.3",
    "mini-css-extract-plugin": "^1.3.9",
    "postcss": "^8.2.8",
    "postcss-loader": "^5.2.0",
    "postcss-preset-env": "^6.7.0",
    "sass": "^1.32.8",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.26.0",
    "webpack-cli": "^4.5.0"
  }
}

webpack.config.json

const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const mode = process.env.NODE_ENV === 'production' ? 'production' : 'development';

module.exports = {
    mode: mode,
    entry: path.resolve(__dirname, "src/js/neso-src.js"),
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "neso.js",
        library: "Neso",
        libraryTarget: "umd",
    },
    devtool: "source-map",
    devServer: {
        contentBase: "./dist"
    },
    module: {
        rules: [
            {
                test: /\.(js)$/,
                exclude: /node_modules/,
                use: "babel-loader",
            },
            {
                test: /\.(s[ac]|c)ss$/i, // This regex adds support for .scss, .sass and .css file types
                use: [
                    mode === 'development' ? "style-loader" :  MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader",
                    "postcss-loader"
                ],
            }
        ],
    },
    plugins: [
        new MiniCssExtractPlugin()
    ],
    watchOptions: {
        aggregateTimeout: 200,
        poll: 1000,
    },
}

【问题讨论】：

标签： javascript webpack

【解决方案1】：

neso-src.js 中的代码有这个导入语句：

import NavBar from './classes/NavBar.js';

引用的文件名实际上是navBar.js。

将 import 语句更改为 import NavBar from './classes/navBar.js'; 有效，该文件中的更改现在会触发重新编译。（大写“N”到小写“n”）。

真正的功劳归于this answer，它为我指明了正确的方向。

【讨论】：