We Keep Coding

how to make a file in src at webpack file

when i put "webpack" file in a new folder and extract it in new folder i go to the "src" file and then go to the terminal of "VSCODE" and write "npm install" after that "npm run build" so i can see every things in "src" file that copied in "dist" file , but my question is that : when i create a new folder in "src" and write "npm run build" in vscode , that new folder wont build in "dist" . in "dist" folder there is just "src" files . how can i put new folder that i have made in "src" , at "dist" file . thanks . i made a new folder in "src" and i cant see this file in "dist"

By default, webpack will use index.js file in src/index.js. This may vary depending on the webpack version.
Generally, its preferred to specify the entry files. Based on your question, I'm assuming you are trying to add additional files to webpack entry that would be parsed and build by webpack.
This is handled by defining additional entry in webpack.config.js
https://webpack.js.org/concepts/entry-points/
module.exports = {
...
entry: {
main: './src/index.js',
vendors: './src/vendors.js',
},
...
};
In the example above, webpack will generate two files in dist/.
dist/main.js
dist/vendors.js

Here is the question I am getting from this:
How can I configure my webpack config so that a new file created in a given src folder will be processed and moved to a given dist folder when running npm run build?
Solution:
For a new source file to be recognized by webpack, you will either need to create a new entry in your webpack.config.js or you will need to import some exported function from your new file into an existing entry.
Here is an example scenario:
I have a directory app containing: app/src/, app/dist/, app/webpack.config.js, app/src/index.js
And when I run npm run build, a file called index.bundle.js is generated in me app/dist folder
I now want a new script contact.bundle.js generated in my app/dist folder when I run npm run build
My existing webpack.cofig.js file looks something like this:
module.exports = {
entry: {
index: "./src/index.js",
},
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist")
},
}
But I want to modify it so now my src/contact.js is recognized by webpack and processed as dist/contact.bundle.js
So I update my webpack.config.js file as follows:
module.exports = {
entry: {
index: "./src/index.js",
contact: "./src/contact.js"
},
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist")
},
}
Please comment if the answer needs to be clarified any further.

Why Output File Name Doesn't Include Content Hash From Webpack?

Hi I have the following in my webpack prod config:
output: {
filename: '[name].[contenthash].js',
publicPath: '/container/latest/'
}
but the output does not include the content hash. My file is always named as main.js not main.[contenthash].js
I'm using webpack version 5.59.1.
I can't figure out the problem.

I've seen the problem. I was running webpack.dev.js instead of webpack.prod.js.

Webpack is adding extra code to bundled file (resulting it to throw error after include)

I am setting bundling in my node project with webpack. I have created webpack config file to bundle file. but after including bundle file I got an error.
I am trying to bundle jquery file into output path. I am able to bundle It using below webpack.config.js code.
var path = require('path');
module.exports = {
target: 'web',
output: {
path: path.resolve(__dirname, "./public/javascripts"),
filename: "bundle-jquery.js",
},
entry: './bower_components/jquery/dist/jquery.min.js'
}
Now I am including output path which is bundled into script src replacing jquery. But its not working and I am getting "$ not defined error". By viewing bundled file, I found that there is an extra code added at start into bundled file.

You are doing it completely wrong. If you want jquery in your project, you should import it in your code.
Entry should be your main.js or whatever your entry file is called. Then in main.js do:
import $ from 'jquery' // or use relative path
Webpack will then bundle jquery for you.

Webpack-dev-server doesn't build files on change

So I have the following webpack configuration :
import path from 'path';
module.exports = {
entry: {
index: './dev/index.js'
},
output: {
path: path.join(__dirname, 'dist'),
publicPath: './dist/',
filename: 'bundle.js',
chunkFilename: '[id].bundle.js'
},
module:{
loader:{
test: /\.js$/,
exclude:path.resolve(__dirname, "node_modules"),
loader: 'js'
}
}
};
The problem is that when I do webpack --watchthe file does build in the /dist/ folder at every change. Yet when I run the webpack-dev-server the files don't even build. Why is that?
Please help.

The reason you are not seeing files emitted into your dist folder is because webpack-dev-server uses an in-memory filesystem
This allows for extremely fast incremental builds when your code changes. This was an intentional design on our part. You can view the resulting code in your browser and never need to reference those files.
It is not recommended by us, for the sake of build performance, but you can look in to plugins like write-file-webpack-plugin if you need this feature.

'webpack' writes your bundle to disk, whereas 'webpack-dev-server' loads the bundle into memory. So when running the latter command you wont see a new 'bundle.js' file appear in your file system, even though you should see output to the console reporting the bundling and the start up of the dev server).
The output.publicPath config key determines the location of the in-memory bundle on the host dev server. So if you set the publicPath to 'dist' then the index.html served by the webpack dev server will need a script tag in order to reference the bundle.

How do I get source mapping to work with Chrome Dev Tools and webpack?

I'm using webpack-dev-server -d --inline to serve my dist/app.js file generated through webpack. I've activated source mapping and it is generating an app.js.map file in my dist/ folder, along with //# sourceMappingURL=app.js.map at the end of the file, yet Chrome devtools doesn't seem to be using the source mapping.
I thought that maybe the problem was that Chrome couldn't see the raw source files (since only the dist/ folder is being served by webpack-dev-server), so I've tried mapping the served file to the local file in dev tools.
Unfortunately I then get a "workspace mapping mismatch", I'm not sure why the file would be different, nor am I sure that this would fix the source mapping problem even if the files did match.
I would appreciate any help.

Configuring publicPath did the trick for me. In your case you could try to point to the same path of your bundled output.
webpack.config.js
var path = require("path");
module.exports = {
entry: './main.js',
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist/',
filename: 'app.js'
}
};