[英]Changes to imported files in webpack library not output during watch
I have a small JS project compiled by webpack 5.26 with the following structure:我有一个由 webpack 5.26 编译的小型 JS 项目,结构如下:
>dist
>src
>js
>classes
carousel.js
navBar.js
neso.src.js
>scss
When running npm run watch
, changes made in navBar.js
or carousel.js
are not outputted after the initial build.运行
npm run watch
时,初始构建后不会输出在navBar.js
或carousel.js
中所做的更改。 Changes made in files in the scss
folder and neso.src.js
are outputted.输出
scss
文件夹和neso.src.js
中文件的更改。
Command line output on these occurances looks like this:这些出现的命令行 output 如下所示:
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
I've tried adding the watchOptions
property and changing the entry
property value in my webpack.config.js
.我尝试在
webpack.config.js
中添加watchOptions
属性并更改entry
属性值。 I've also tried changing the import/export declarations in neso.src.js but nothing helped and changes in classes
files still aren't being output on watch.我也尝试过更改 neso.src.js 中的导入/导出声明,但没有任何帮助,并且
classes
文件中的更改仍然没有被 output 关注。 Please can you advise how to achieve this.请您建议如何实现这一目标。
package.json 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 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,
},
}
The code in neso-src.js
had this import statement: neso-src.js
中的代码有这个 import 语句:
import NavBar from './classes/NavBar.js';
and the referenced filename was actually navBar.js
.并且引用的文件名实际上是
navBar.js
。
Changing the import statement to import NavBar from './classes/navBar.js';
将导入语句更改为
import NavBar from './classes/navBar.js';
worked and changes in that file now trigger a recomplile.工作并且该文件中的更改现在触发重新编译。 (Uppercase 'N' to lowercase 'n').
(大写“N”到小写“n”)。
Real credit goes to this answer which pointed me in the right direction.真正的功劳归功于这个答案,它为我指明了正确的方向。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.