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

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"

CodePudding user response：

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

CodePudding user response：

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.