Estoy tratando de hacer que Webpack cree archivos Javascript y CSS en sus respectivas carpetas. Soy bastante nuevo en Webpack y parece que no puedo encontrar el complemento exacto que me ayude a hacer esto.

Esto es lo que estoy tratando de lograr:

 dist |___js | |__app.js | |__vendor.js | |___css | |__style.css | |___index.html

El archivo de configuración:

 const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { mode: "development", entry: { app: path.resolve(__dirname, "src/js/app.js") }, output: { path: path.resolve(__dirname, "dist/js"), filename: "[name].[contenthash].bundle.js", clean: true }, devtool: "inline-source-map", devServer: { contentBase: path.resolve(__dirname, "dist"), port: 5001, open:true, hot: true, watchContentBase: true }, plugins: [new HtmlWebpackPlugin({ filename: "main.html", template: path.resolve(__dirname, "src/index.html")}), new MiniCssExtractPlugin({ filename: "main.css" }) ], module: { rules: [ { test: /\.js$/, exclude: /node_modules/ }, { test:/\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"] } ] } }

Si no me he dejado claro, no dude en hacerme cualquier pregunta.