the question is quite simple. I have a project where I'm using developed npm package. I want to configure dev environment that I could edit both: source code of my application and one package from node_module folder. so the structure is something like
- frontend <- want to edit this files
- node modules
...
-my-own-package
the issue is that I can see that web server is reacting to "my-own-package" changes , but the result is kind of cached or something. I can't see changes in my code. I was trying to disable cache, but webpack-dev server goes in to inifinite recomile loop. How can I do it properly?
mydev webpack config lloks like this:
const path = require('path');
const common = require('./webpack.common.config')
const { merge } = require('webpack-merge');
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = merge(common, {
mode: "development",
entry: ["./index.js",path.resolve(__dirname, "node_modules/my-own-package")],
devServer: {
port: 80,
host: '0.0.0.0',
historyApiFallback: true,
disableHostCheck: true,
watchOptions: {
aggregateTimeout: 500,
poll: 1000,
}
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].js"
},
plugins: [
new HtmlWebpackPlugin({
template: "./index.html"
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
"style-loader", //2. Inject styles into DOM
"css-loader" //1. Turns css into commonjs
]
}
]
}
});
CodePudding user response:
Workaround:
As I learned there is no such an option at the moment. the workaround is to play around with resole just put your library in a folder next to the frontend ( in my case "dependencies")
module.exports = merge(common,
{ mode: "development",
resolve: {
modules: ['dependencies' , 'node_modules' ],
},
then it's fine.