[Vuejs]-Import all vue js components in a single file

by

0👍

✅

Create a folder for your bundler – frontend-dev for example.

$ cd frontend-dev
$ npm init

add the following dependencies

"devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "babel-loader": "^8.0.5",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3"
  }

$ npm install

Create webpack.config.js with the following minimal configs:

let path = require('path');

module.exports = {

  output: {
      path: p('../public'), // where to create bundles files
      publicPath: '/public/', // public path to the created files
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
    ]
  },
};

/**
 * Path.resolve alias curried with current directory (__dirname)
 * as first parameter
 */
function p(){
  return path.resolve(__dirname, ...arguments)
}

In frontend-dev create folder src and index.js in it:

// index.js
import '../../comp1.js'
import '../../comp2.js'

Add "build": "webpack" command in scripts section in package.json and run npm run build to see you bundled.js file in the specified public dir.

You can use require.context to import all files in a directory see webpack docs.

Leave a comment