webpack-contrib / awesome-webpack Goto Github PK

I haven't compared the lists at length but I think there a lot of merit in merging @markerikson 's webpack advanced techniques list into this repo. It's a little bit of work doing all the copy pasta and finding dupes, but maybe you could label this hacktoberfest on the issue, and someone can find this and do a PR.

• Need to transfer the style fixes over to the published page

Because a README.md sucks to actually read :)

• Custom template
• Less annoying width
• No need for the standard lib download stuff
• TOC left of readable content as to not burn vertical space

• List out common webpack examples
• Troll the web for solid ( preferably framework agnostic ) webpack examples

• Currently lol when viewing on mobile :(

• The indentation is obnoxious, kill it with fire :)

https://github.com/webpack-contrib/awesome-webpack#twitter

@TheLarkInn

/cc @snitin315 @chenxsan Maybe we can merge it in webpack docs site - create new page awesome put in navigation, so we will have all in one place

• Add the obvious things
• Include a list of "Who to follow" with better wording.

when i want output file in webpack-dev-server tools, i think this maybe can be used.
thanks

The link under documentation for Webpack 2.x is 404

Thanks for this cool repo. Would you be interested in angular 2 webpack links?

https://github.com/AngularClass/awesome-angular2#webpack

Greetings Damien

Not sure if this is the sort of thing you want to include, but Rails now has an official way to implement webpack in to a ruby on rails site:

https://github.com/rails/webpacker

https://github.com/sindresorhus/awesome-lint

:)

• Reference a single url for the SVG images
• Tinker with using a div to properly align maintainer, github/twitter images & library stats

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()
];