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.

webpack-dev-server and webpack -> output file to parent directory and have webpack-dev-server hot reloading still working

We have the following structure in our web application:
/src(.sln)
--/ClientSite
--/AdminSite
--/SharedWeb
In SharedWeb we have the following folders:
--/Client
--/Admin
--/Shared
We have this structure in order to have hot reloading with webpack-dev-server no matter what file we edit and only have one package.json etc. Thread about why we choose this structure if anyone is interested:
Shared react front end components -> Separate project with TypeScript -> Visual Studio 2017
Everything has worked fine so far but now that we need to deploy our solution we need to export the bundle.js to the correct site.
In webpack.client.config.js:
Works fine with hot reloading but script file is not exported to the site correctly:
output: {
filename: "./Scripts/dist/[name].bundle.js",
},
Script file is exported correctly but hot reloading stops working:
output: {
filename: "../ClientSite/Scripts/dist/[name].bundle.js",
},
Correct way with using path and filename according to documentation, nothing works:
output: {
path: path.resolve(__dirname, "Scripts/dist/"),
filename: "[name].bundle.js"
}
Script file is exported correctly but hot reloading does not work. If I use webpack with --watch and manually reload webpack-dev-server URL I can see the changes but it does not reload automatically.
output: {
path: path.resolve(__dirname, "../ClientSite/Scripts/dist/"),
filename: "[name].bundle.js"
},

Solved it like this, publicPath was the key for automatic updates to work in webpack-dev-server.
output: {
path: path.resolve(__dirname, "../ClientSite/Scripts/dist/"),
publicPath: '/Scripts/dist',
filename: "[name].bundle.js"
},
https://github.com/webpack/docs/wiki/configuration#outputpublicpath

webpack entry and output path

I have a file directory like this
and my webpack.config.js look like
module.exports = {
entry: [
'webpack/hot/dev-server',
'webpack-hot-middleware/client',
'./resources/assets/bundle/entries/feed.js'],
output: {
path : path.join(__dirname, 'public/bundle'),
publicPath : '/',
filename : 'bundle.js'
}
}
what is wrong? why I did not find the bundle.js in my public/bundle/bundle.js? I run http://localhost:3000/bundle/bundle.js I got 404 error hmm..

In developer mode webpack is not generating the file in the hard-drive.
If you run webpack in production mode you will see the generated file.

When you use hot reload or different watcher, webpack generate virtual bundle. If you try to run global command 'webpack' or build project, you can get bundle.js

In your index.html we do not mention the path of a file with localhost rather relative to the current file. So if index.html is in root you will mention the script src as below
<script src="./public/bundle/bundle.js"></script>

How to understand the webpack config in react-router project

I am learning react-router dynamic routing from this link https://github.com/ReactTraining/react-router/blob/master/docs/guides/DynamicRouting.md. The huge-apps project is the one I am looking into. I cloned the react-router git repo from https://github.com/ReactTraining/react-router and followed the instruction to set it up. Everything works fine here. But I don't understand some parts of the configuration in webpack configuration under examples directory.
Below is the output of the webpack config:
output: {
path: __dirname + '/__build__',
filename: '[name].js',
chunkFilename: '[id].chunk.js',
publicPath: '/__build__/'
},
I can see that all the output files are put under /__build__ directory. In huge-apps/index.html file, I can see it load the javascript files as below:
<script src="/__build__/shared.js"></script>
<script src="/__build__/huge-apps.js"></script>
But I couldn't find the __build__ directory under the entire react-router project. And I couldn't find the shraed.js and huge-apps.js file either. I am confused about where webpack put these files. From the inspect on browser I can see it loads the javascript files from http://localhost:8080/build/huge-apps.js. Are they in memory only?

The React Router examples use webpackDevMiddleware to handle requests to __build__ resources, which serves files from in-memory.
From server.js:
app.use(webpackDevMiddleware(webpack(WebpackConfig), {
publicPath: '/__build__/',
stats: {
colors: true
}
}))

If you are running webpack indevelopment mode all the file get loaded in memory. to create the file in you need to add "ExtractTextPlugin" plugin in webpack
output: {
path: __dirname + '/__build__',
filename: '[name].js',
chunkFilename: '[id].chunk.js',
publicPath: '/__build__/
},
plugins: [
....
new ExtractTextPlugin("[name].css"),
...
],

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'
}
};