Saving files webpack in different folders?

Welcome!

In the docks webpack features:
module.exports = {
 entry: {
 app: './src/app.js',
 search: './src/search.js'
},
 output: {
 filename: '[name].js',
 path: __dirname + '/dist'
}
};

It turns out that entry, you can specify the path to any file in the src.

Question: how in webpack 4 to specify the output path to different folders, such as save app.js in the /dist/app/ and search.js in /dist/search/?

Thank you!
March 12th 20 at 08:09
2 answers
March 12th 20 at 08:11
Solution
try this:

module.exports = {
 entry: {
 "app/script.js": './src/app.js',
 "search/script.js": './src/search.js'
},
 output: {
 path: __dirname + '/dist'
}
};
March 12th 20 at 08:13
Solution
Sorry - no way. You can only have one output path., but you can use multiple configs and export the array with these configs:

// webpack.config.js

const { join } = require('path');

const appConfig = {
 entry: './src/app.js',
 output: {
 filename: '[name].js',
 path: join(__dirname, 'dist/app')
}
};

const searchConfig = {
 entry: './src/search.js',
 output: {
 filename: '[name].js',
 path: join(__dirname, 'dist/search')
}
};

const common = {
 context: __dirname

 module: {
 rules: [...]
}
};

module.exports = [{
...common
...appConfig
}, {
...common
...searchConfig
}];
output can one ask, but entry can also specify the path.
here's the config I usually use:
entry: {
 "js/app" : [path.resolve(srcDir, "js/app.js")],
 "css/vendors" : [path.resolve(srcDir, "sass/vendor.scss")],
 "css/style" : [path.resolve(srcDir, "sass/style.scss")]
},
 output: {
 path: assetsDir
},
// ....
 optimization: {
 runtimeChunk: {
 name: "js/runtime"
},
 splitChunks: {
 cacheGroups: {
 vendors: {
 test: /[\\/]node_modules[\\/](.*)\.js$/,
 name: "js/vendors",
 enforce: true,
 chunks: "all"
}
},
},
 }
- vilma_Collier commented on March 12th 20 at 08:16

Find more questions by tags Webpack