A Framework for WebPack

[Denis Migdal]

Hi,

Considering that creating webpack.config.js files can be troublesome for new comers and can quickly become unreadable, I created a small framework to handle this issue. This could be a first step toward a 0-config Webpack, just like what Parcel does.

I would like to know what are you thinking of this Framework, and if somebody could guide me if you think it could be interesting to merge it, e.g. into some documentations. I will be quite available Monday, and for 2 weeks, I'll push my Framework with its documentation into NPM Monday.

Thanks, in advance,

The principle of this Framework is quite simple :

const fs = require('fs');

const {BUILDERS} = require('....'); // we get some "builders"

// list your builds here.
module.exports = [
	// Build individual pages
	BUILDERS.WebPage(output_dir, input_dir),
	BUILDERS.WebPage(output_dir2, input_dir2),
];

And voilà, you have a full configuration to build web pages with HTML, JS, and CSS dependencies. Without the Framework, the corresponding Webpack configuration would be way too verbose.

You have other builders, for example to build a set of webpages :

const {BUILDERS, WebPage} = require('prehtml-loader');

module.exports = [
        // Build a website (a set of pages)
	...BUILDERS.WebSite(output_dir, input_dir, { // Pages
	       about: new WebPage('pages/about/'), // one page.
	       articles: WebPage.listWebPages(`${input_dir}/articles`) // several pages from a directory.
        }
];

Of course, we can easily modify the rules that are used :

const {BUILDERS, RULES} = require('prehtml-loader');

let rules = Object.assign({}, RULES); // get the default rules.

rules.js = function(config, {src, dst}) { // modify a rule.

        // a rule enable to modifies a standard WebPack configuration (i.e. you can add plugins, entries, module.rules, etc.).
	config.output.filename = `${dst}/index.js`;
	config.entry.push(`${src}/index.js`);
}

module.exports = [
	BUILDERS.WebPage('./dist/dev/page1', './src/page1', {rules} )
];

The objective is also to remove the rules from the Webpack config, enabling, for example, to reuse personalized rules across several projects (not implemented yet) :

const {BUILDERS, RULES_LOADER} = require('prehtml-loader');

let rules = RULES_LOADER('./src/webpack-rules'); // load project specific rules
// -- OR --
const {rules} = require('mylib'); // load rules from a npm package.

module.exports = [
	BUILDERS.WebPage('./dist/dev/page1', './src/page1', {rules} )
];

Of course, you can create your own builders or extends existing ones (it has to return a Wepack configuration) :

let MyBuilder = () => {
       let config = BUILDERS.WebPage('./dist/dev/page1', './src/page1' );
       config.plugins.push(....);
       return config;
}

let MyBuilder2 = () => {
     let rules = ....;

     let config = {
		module: {
			rules: [],
		},
		entry: [],
		output: {
			path: ROOT,
			publicPath: ''
		},
		plugins: []
	};

	for(let rule in rules)
		rules[rule](config, options);

	return config;
}

module.exports = [
      MyBuilder(),
      MyBuilder2()
];