how to make a file in src at webpack file - javascript

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.

Related

Webpack: how to copy html files into build folder?

I am working on a JavaScript project that is using Webpack. To be honest, I am a bit new to Webpack. Let me explain how my project's build system work. When I run "npm run dev", it copies the files from js, scss and other folders within the project's root folder into the build folder which is also inside the project's root folder. There is an index.html file inside the project's root folder. The index.html file is copied right into the {root}/build/index.html folder. Now, what I am trying to do is that I am trying to add a new HTML file right under the project root folder called, info.html. When I run "npm run dev", I want it to copy the info.html file into build/index.html folder. I tried putting the following in the webpack.config.dev.js file.
{
test: /\.html$/i,
loader: 'html-loader',
}
But the info.html file is not copied across over into the build folder. How can I do that?
When I used the CopyWebpackPlugin, it was throwing the following error.
node_modules\copy-webpack-plugin\node_modules\p-limit\index.js:30
} catch {}
^
SyntaxError: Unexpected token {
at new Script (vm.js:51:7)
at createScript (vm.js:136:10)
at Object.runInThisContext (vm.js:197:10)
at Module._compile (internal/modules/cjs/
No need of file-loader or html-loader when you are using copy-webpack-plugin.
Import the module in your webpack config:
const CopyPlugin = require('copy-webpack-plugin');
and append this to plugins section:
...
plugins: [
...
new CopyPlugin({
patterns: [
{
from: path.resolve(__dirname, 'info.html'),
to: path.resolve(__dirname, 'build')
},
],
}),
...
],
...
You need to upgrade nodejs, the version number must be greater than 10.13.0

Make webpack move files from src to dest without processing it

I have some sites running with JSF and some vanilla ES6 that is being processed with webpack (Running 4.6).
The problem is that webpack adds something to my jsf.js file when it moves the file to my dest folder, and doesn't work with how JSF needs to be run.
Setup: There is the jsf.js and the vanilla ES6 files in a src folder. I then use webpack to process and move the bundle and the jsf.js file to a dest folder.
The JSF.js file is already minimized in the src folder and cannot be uglified so I have added exclude on uglify:
optimization: {
minimizer: [
new UglifyJsPlugin({
exclude: /(jsf.js)/,
})
]
}
The jsf.js also has its own entry btw.
So my question is, how do I make webpack only move the jsf.js and add nothing to it? There must be some kind of exclude that I am missing here. I use no plugins other than uglify.
If you just want copy jsf.js to dist directory. you should try copy-webpack-plugin, not give it its own entry.
install it throught npm:
npm i -D copy-webpack-plugin
require it in webpack.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin')
add to plugins's array
[
new CopyWebpackPlugin([
{ from: 'path/to/jsf.js', to: 'dist/' }
])
]

How can I move "index.html" when using webpack?

Generally,when will "index.html" be loaded using webpack?
I want to move "index.html" to in build/.
I'm in trouble over data flow from npm start using webpack.
In package.json, "start" is defined as:
"node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js".
However,I couldn't find where it would jump from "webpack-dev-server.js".
I found two description about "index.html" in it as below:
.boolean("history-api-fallback").describe("history-api-fallback", "Fallback to /index.html for Single Page Applications.")
and
console.log("404s will fallback to %s", options.historyApiFallback.index || "/index.html");
when I try moving "index.html" to in build/, browser returned "Cannot Get error".
"index.html" and webpack.config.js are in same folder now.
./ index.html package.json src/ test/
../ build/ node_modules/ public/ style/
webpack.config.js
One way is to update the script (in package.json) so it copies index.html to the destination folder:
"scripts": {
"start": "node node_modules/.bin/webpack-dev-server --content-base src",
"build": "node node_modules/.bin/webpack && cp src/index.html build/index.html"
}
npm run build should now also copy src/index.html to build/index.html.
I'm not a webpack expert, but I faced the same issue, and was able to solve it using a plugin: html-webpack-plugin
First install it: npm install html-webpack-plugin --save-dev
Then edit your webpack.config.js:
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//Your config here (entry, module, resolve, etc.)
devServer: {
contentBase: './build' //Or any other path you build into
},
plugins: [
//other plugins if any
new HtmlWebpackPlugin({
template: './index.template.html', //your template file
filename: 'index.html',
inject: 'body'
})
]
};
This is going to copy your index.template.html to ./build/index.html and serve files from there.
It will also inject all assets at the bottom of the <body> tag.
You can further costumize this setup to fit your need of course, just refer to the plugin docs.

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>

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.

Categories