webpack-contrib / awesome-webpack Goto Github PK
View Code? Open in Web Editor NEWA curated list of awesome Webpack resources, libraries and tools
License: Creative Commons Zero v1.0 Universal
A curated list of awesome Webpack resources, libraries and tools
License: Creative Commons Zero v1.0 Universal
Because a README.md sucks to actually read
:)
when i want output file in webpack-dev-server tools, i think this
maybe can be used.
thanks
/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
The link under documentation for Webpack 2.x is 404
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:
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()
];
lol
when viewing on mobile :(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.
Thanks for this cool repo. Would you be interested in angular 2 webpack links?
https://github.com/AngularClass/awesome-angular2#webpack
Greetings Damien
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.