Use webpack for vanilla javascript

Let’s say you have a vanilla javascript files in your web page, how can you combine and transpile them into one file for production?

Create a webpack.config.js (this is webpack 2):

var path = require("path");
var CommonsChunkPlugin = require("./server/public/js/CommonsChunkPlugin");

module.exports = {
entry: {
news: "./client-src/news/index",
admin: "./client-src/admin/index",
app: "./client-src/app/index"
},
output: {
path: path.join(__dirname, "server/public/bundles"),
filename: "[name].bundle.js",
chunkFilename: "[id].chunk.js"
},
plugins: [
new CommonsChunkPlugin({
filename: "commons.bundle.js",
name: "commons.bundle"
})
],
devtool: 'eval-source-map',
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader'
}
}
]
}
};

Btw, I also have a multiple entries. For each entry, webpack will generate a js file.

Now, you need to create an app.js that have something like this:

import main from "./main";
main();

import contact from "./contact";
contact();

import portfolio from "./portfolio";
portfolio();

import team from "./team";
team();

This way, webpack knows to go and crawl those files too.

Each of the files will look like this:

function main(  ) {
  console.log('in main');
}

export default main;

Here we export a function, and in the step above, we executes those functions, which in return executes those vanilla js.

Let’s keep in touch. Sign up here.

Like what you read? Give Steve Mu a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.