I'm trying to configure webpack to compile/bundle small standalone Vue apps (each living in their own separate subdirectory) once, automatically from the top level; instead of setting up webpack inside each of the subdirectories and manually running an npm run build on each of them. How can I achieve this? Below is my current directory structure which works for one app under front-end(the Django subdirectories are not relevant so I've left them out):
. ├── db.sqlite3 ├── front-end/ │ ├── App.vue │ ├── assets │ ├── components │ └── main.js ├── manage.py ├── node_modules/ ├── package-lock.json ├── package.json ├── django_project/ ├── django_app/ ├── static (where i want all the outputs to go) │ ├── d61e288f5de33456b33fb3c47275f16c.png │ └── index-bundle.js └── webpack.config.js (id like this top level config to bundle multiple subdirs) My top level web pack config looks like the following, but currently is only for one Vue app (front-end), whereas I'd like to ideally have several apps under their own subdirs there instead (front-end/vue-app-1, front-end/vue-app-2 etc.):
const path = require('path'); const {VueLoaderPlugin} = require('vue-loader') module.exports = { entry: './front-end/main.js', // path to our input file output: { filename: 'index-bundle.js', // output bundle file name path: path.resolve(__dirname, './static'), // path to our Django static directory }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', options: { presets: [ ['@babel/preset-env', {targets: "defaults"}] ] } }, // this will apply to both plain `.css` files // AND `<style>` blocks in `.vue` files { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader' ] }, { test: /\.(jpe?g|png|gif|svg)$/i, use: [ {loader: 'file-loader'}, {loader: 'image-webpack-loader'}, ] } ] }, plugins: [ // make sure to include the plugin for the magic new VueLoaderPlugin() ] }; Note: the idea is to NOT have to create entirely separate webpack/babel configurations like the following and build them manually:
├── vue-app-1 │ ├── README.md │ ├── babel.config.js │ ├── dist │ ├── jsconfig.json │ ├── node_modules │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── src │ └── vue.config.js ├── vue-app-2 │ ├── README.md │ ├── babel.config.js │ ├── dist │ ├── jsconfig.json │ ├── node_modules │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── src │ └── vue.config.js Thank you so much in advance! I appreciate any additional input since im fairly new to bundling etc. I tried playing around but I dont really see options in web pack for doing this.
PS: in case its helpful, I'm trying to build a hybrid Django + vue app, whereby I can simply drop in the relevant imports into my django templates to get it to load standalone Vue apps where necessary.
