I am using the mini-css-extract-plugin to extract the CSS from a bundle to a file. I need to drop that file in a different place in the filesystem.
How do I configure the mini-css-extract-plugin to drop the CSS file to a different path than the JS bundle?
Let's assume the following config:
webpack.config.js
module.exports = {
// ...
output: {
path: path.resolve(__dirname, "dist") // this is the default value
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css" // change this RELATIVE to your output.path!
})
]
// ...
}
Where your output path would resolve to - as an example - /home/terribledev/projects/some-project/dist.
If you change the filename property of the MiniCssExtractPlugin options object to ../../[name].css, it will now be output to /home/terribledev/projects/yourcssfile.css, e.g.:
module.exports = {
output: {
path: path.resolve(__dirname, "dist")
},
plugins: [
new MiniCssExtractPlugin({
filename: "../../[name].css"
})
]
// ...
}
css/ directory in dist directory?
To specify an output path within the build directory, I include the subdirectory in the filename:
const path = require('path');
module.exports = {
// ...
output: {
path: path.resolve(process.cwd(), 'build'), // should be an absolute path
filename: 'js/[name].js', // relative to output.path
},
plugins: [
new MiniCssExtractPlugin({
filename: "css/[name].css", // relative to output.path
}),
],
// ...
}
I've tested this in Webpack versions 4 and 5 with success. Check out the docs for Webpack output to learn more.
