├── .gitignore ├── app ├── css │ ├── variables.styl │ ├── 404.styl │ ├── deprecation.styl │ ├── style.styl │ ├── tutorial.styl │ ├── anchor.styl │ ├── doc.styl │ ├── code.styl │ ├── contents.styl │ ├── logo.styl │ ├── landing.styl │ ├── sidebar.styl │ ├── reset.styl │ ├── mixins.styl │ └── general.styl ├── tutorial.js ├── landing.js ├── doc.js ├── docsearch.js ├── downloadWiki.js ├── disqus.js ├── googleAnalytics.js ├── FullTextSearcher.js ├── onContentLoaded.js ├── 404.js └── bindToIntraLinks.js ├── tutorials ├── getting-started │ ├── 1.3 second-file │ │ ├── .tutorialignore │ │ ├── entry.js │ │ ├── content.js │ │ ├── webpack.config.js │ │ └── README.md │ ├── 1.4 first-loader │ │ ├── .tutorialignore │ │ ├── style.css │ │ ├── entry.js │ │ ├── webpack.config.js │ │ └── README.md │ ├── 1.5 binding-loaders │ │ ├── .tutorialignore │ │ ├── entry.js │ │ ├── webpack.config.js │ │ └── README.md │ ├── 1.2 setup-compilation │ │ ├── .tutorialignore │ │ ├── entry.js │ │ ├── webpack.config.js │ │ ├── index.html │ │ └── README.md │ ├── 1.1 installing-webpack │ │ └── README.md │ ├── 1.0 welcome │ │ └── README.md │ ├── 1.6 config-file │ │ ├── webpack.config.js │ │ └── README.md │ ├── 1.8 watch-mode │ │ ├── webpack.config.js │ │ └── README.md │ ├── 1.7 pretty-output │ │ └── README.md │ └── 1.9 development-server │ │ └── README.md └── migrate-to-webpack │ ├── 1.5 modules │ ├── .tutorialignore │ ├── userAgentModel.coffee │ ├── userAgentView.coffee │ ├── styles.less.css │ ├── app.coffee │ ├── webpack.config.js │ └── README.md │ ├── 1.8 templates │ ├── .tutorialignore │ ├── userAgentView.jade │ ├── index.html │ ├── userAgentView.coffee │ ├── README.md │ └── webpack.config.js │ ├── 1.7 other-resources │ ├── .tutorialignore │ ├── userAgentView.coffee │ ├── index.html │ ├── webpack.config.js │ └── README.md │ ├── 1.1 normal-app │ ├── .tutorialignore │ ├── styles.less │ ├── styles.less.css │ ├── app.coffee │ ├── app.coffee.js │ ├── README.md │ └── index.html │ ├── 1.6 external-depencencies │ ├── .tutorialignore │ ├── userAgentView.coffee │ ├── styles.less.css │ ├── app.coffee │ ├── index.html │ ├── webpack.config.js │ └── README.md │ ├── 1.4 webpack-config │ ├── .tutorialignore │ ├── styles.less.css │ ├── webpack.config.js │ └── README.md │ ├── 1.2 lets-webpack │ ├── .tutorialignore │ ├── styles.less.css │ ├── webpack.config.js │ ├── app.coffee.js │ ├── index.html │ └── README.md │ ├── 1.3 coffee-script │ ├── .tutorialignore │ ├── styles.less.css │ ├── webpack.config.js │ └── README.md │ └── 1.0 welcome │ └── README.md ├── lib ├── linkToTitle.js ├── titleToLink.js ├── extractRegExpFromText.js ├── highlight.js │ ├── json.js │ ├── javascript.js │ ├── xml.js │ ├── css.js │ ├── coffeescript.js │ ├── package.json │ └── highlight.js ├── diff.js │ ├── diff.js │ └── lcs.js ├── renderMarkdown.js └── fuse.js │ └── Searcher.js ├── layouts ├── logo.html ├── header.html ├── deprecation.html ├── tutorial.html ├── 404.html ├── doc.html └── landing.html ├── README.md ├── webpack.config.js ├── package.json ├── Gruntfile.js └── tasks ├── staticwiki.js └── statictutorial.js /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.grunt 3 | /dist -------------------------------------------------------------------------------- /app/css/variables.styl: -------------------------------------------------------------------------------- 1 | $font-highlight = 'Coda', sans-serif; -------------------------------------------------------------------------------- /tutorials/getting-started/1.3 second-file/.tutorialignore: -------------------------------------------------------------------------------- 1 | webpack.config.js -------------------------------------------------------------------------------- /tutorials/getting-started/1.4 first-loader/.tutorialignore: -------------------------------------------------------------------------------- 1 | webpack.config.js -------------------------------------------------------------------------------- /tutorials/getting-started/1.5 binding-loaders/.tutorialignore: -------------------------------------------------------------------------------- 1 | webpack.config.js -------------------------------------------------------------------------------- /tutorials/getting-started/1.2 setup-compilation/.tutorialignore: -------------------------------------------------------------------------------- 1 | webpack.config.js -------------------------------------------------------------------------------- /app/tutorial.js: -------------------------------------------------------------------------------- 1 | require("./css/tutorial.styl"); 2 | require("./googleAnalytics"); 3 | -------------------------------------------------------------------------------- /tutorials/getting-started/1.2 setup-compilation/entry.js: -------------------------------------------------------------------------------- 1 | document.write("It works."); -------------------------------------------------------------------------------- /tutorials/getting-started/1.3 second-file/entry.js: -------------------------------------------------------------------------------- 1 | document.write(require("./content.js")); -------------------------------------------------------------------------------- /tutorials/getting-started/1.4 first-loader/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: yellow; 3 | } -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.5 modules/.tutorialignore: -------------------------------------------------------------------------------- 1 | jquery.min.js 2 | styles.less.css -------------------------------------------------------------------------------- /tutorials/getting-started/1.3 second-file/content.js: -------------------------------------------------------------------------------- 1 | module.exports = "It works from content.js."; -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.8 templates/.tutorialignore: -------------------------------------------------------------------------------- 1 | web_modules/jquery.js 2 | styles.less.css -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.7 other-resources/.tutorialignore: -------------------------------------------------------------------------------- 1 | web_modules/jquery.js 2 | styles.less.css -------------------------------------------------------------------------------- /app/landing.js: -------------------------------------------------------------------------------- 1 | require("./css/landing.styl"); 2 | require("./googleAnalytics"); 3 | require("./docsearch"); 4 | -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.1 normal-app/.tutorialignore: -------------------------------------------------------------------------------- 1 | jquery.min.js 2 | styles.less.css 3 | app.coffee.js -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.5 modules/userAgentModel.coffee: -------------------------------------------------------------------------------- 1 | module.exports = window.navigator.userAgent 2 | -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.6 external-depencencies/.tutorialignore: -------------------------------------------------------------------------------- 1 | web_modules/jquery.js 2 | styles.less.css -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.4 webpack-config/.tutorialignore: -------------------------------------------------------------------------------- 1 | jquery.min.js 2 | styles.less.css 3 | app.coffee.js -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.8 templates/userAgentView.jade: -------------------------------------------------------------------------------- 1 | h1 Hello World. 2 | p Your User-Agent is: #{model} 3 | -------------------------------------------------------------------------------- /tutorials/getting-started/1.5 binding-loaders/entry.js: -------------------------------------------------------------------------------- 1 | require("./style.css"); 2 | document.write(require("./content.js")); -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.5 modules/userAgentView.coffee: -------------------------------------------------------------------------------- 1 | exports.render = (model) -> 2 | $("#user-agent").text model 3 | -------------------------------------------------------------------------------- /tutorials/getting-started/1.4 first-loader/entry.js: -------------------------------------------------------------------------------- 1 | require("!style!css!./style.css"); 2 | document.write(require("./content.js")); -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.2 lets-webpack/.tutorialignore: -------------------------------------------------------------------------------- 1 | webpack.config.js 2 | jquery.min.js 3 | styles.less.css 4 | app.coffee.js -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.3 coffee-script/.tutorialignore: -------------------------------------------------------------------------------- 1 | webpack.config.js 2 | jquery.min.js 3 | styles.less.css 4 | app.coffee.js -------------------------------------------------------------------------------- /app/css/404.styl: -------------------------------------------------------------------------------- 1 | @import 'variables.styl' 2 | @import 'mixins.styl'; 3 | @import 'general.styl' 4 | @import 'sidebar.styl'; 5 | @import 'logo.styl'; 6 | -------------------------------------------------------------------------------- /app/css/deprecation.styl: -------------------------------------------------------------------------------- 1 | .deprecation 2 | border 1px solid red 3 | padding 2em 4 | font-size 1.2em 5 | font-weight 400 6 | margin-bottom 1em 7 | -------------------------------------------------------------------------------- /lib/linkToTitle.js: -------------------------------------------------------------------------------- 1 | module.exports = function linkToTitle(link) { 2 | if(!link) return link; 3 | return link.toLowerCase().replace(/[^a-z0-9\.]/g, " "); 4 | } 5 | -------------------------------------------------------------------------------- /lib/titleToLink.js: -------------------------------------------------------------------------------- 1 | module.exports = function titleToLink(title) { 2 | if(!title) return title; 3 | return title.replace(/[ _]/g, "-").toLowerCase(); 4 | } 5 | -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.1 normal-app/styles.less: -------------------------------------------------------------------------------- 1 | body { 2 | background: #eee; 3 | p { 4 | border: 1px solid #333; 5 | border-radius: 3px; 6 | } 7 | } -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.6 external-depencencies/userAgentView.coffee: -------------------------------------------------------------------------------- 1 | $ = require("jquery") 2 | exports.render = (model) -> 3 | $("#user-agent").text model 4 | -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.5 modules/styles.less.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #eee; 3 | } 4 | body p { 5 | border: 1px solid #333; 6 | border-radius: 3px; 7 | } 8 | -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.1 normal-app/styles.less.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #eee; 3 | } 4 | body p { 5 | border: 1px solid #333; 6 | border-radius: 3px; 7 | } 8 | -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.2 lets-webpack/styles.less.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #eee; 3 | } 4 | body p { 5 | border: 1px solid #333; 6 | border-radius: 3px; 7 | } 8 | -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.3 coffee-script/styles.less.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #eee; 3 | } 4 | body p { 5 | border: 1px solid #333; 6 | border-radius: 3px; 7 | } 8 | -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.5 modules/app.coffee: -------------------------------------------------------------------------------- 1 | $ -> 2 | model = require "./userAgentModel.coffee" 3 | view = require "./userAgentView.coffee" 4 | view.render model 5 | -------------------------------------------------------------------------------- /tutorials/getting-started/1.3 second-file/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: "./entry.js", 3 | output: { 4 | path: __dirname, 5 | filename: "bundle.js" 6 | } 7 | }; -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.4 webpack-config/styles.less.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #eee; 3 | } 4 | body p { 5 | border: 1px solid #333; 6 | border-radius: 3px; 7 | } 8 | -------------------------------------------------------------------------------- /tutorials/getting-started/1.4 first-loader/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: "./entry.js", 3 | output: { 4 | path: __dirname, 5 | filename: "bundle.js" 6 | } 7 | }; -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.6 external-depencencies/styles.less.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #eee; 3 | } 4 | body p { 5 | border: 1px solid #333; 6 | border-radius: 3px; 7 | } 8 | -------------------------------------------------------------------------------- /tutorials/getting-started/1.2 setup-compilation/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: "./entry.js", 3 | output: { 4 | path: __dirname, 5 | filename: "bundle.js" 6 | } 7 | }; -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.2 lets-webpack/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: "./app.coffee.js", 3 | output: { 4 | path: __dirname, 5 | filename: "bundle.js" 6 | } 7 | }; -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.7 other-resources/userAgentView.coffee: -------------------------------------------------------------------------------- 1 | require "./styles.less" 2 | $ = require("jquery") 3 | exports.render = (model) -> 4 | $("#user-agent").text model 5 | -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.6 external-depencencies/app.coffee: -------------------------------------------------------------------------------- 1 | $ = require("jquery") 2 | $ -> 3 | model = require "./userAgentModel.coffee" 4 | view = require "./userAgentView.coffee" 5 | view.render model 6 | -------------------------------------------------------------------------------- /app/doc.js: -------------------------------------------------------------------------------- 1 | require("./css/doc.styl"); 2 | require("./googleAnalytics"); 3 | require("./disqus"); 4 | require("./docsearch"); 5 | 6 | require("./onContentLoaded")(function(event) { 7 | require("./bindToIntraLinks"); 8 | }); 9 | -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.8 templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /app/css/style.styl: -------------------------------------------------------------------------------- 1 | @import 'variables.styl' 2 | @import 'mixins.styl'; 3 | @import 'general.styl' 4 | @import 'sidebar.styl'; 5 | @import 'logo.styl'; 6 | @import 'contents.styl'; 7 | @import 'code.styl'; 8 | @import 'anchor.styl'; 9 | -------------------------------------------------------------------------------- /tutorials/getting-started/1.2 setup-compilation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.8 templates/userAgentView.coffee: -------------------------------------------------------------------------------- 1 | require "./styles.less" 2 | $ = require("jquery") 3 | template = require "./userAgentView.jade" 4 | exports.render = (model) -> 5 | $("body").html template 6 | model: model 7 | -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.0 welcome/README.md: -------------------------------------------------------------------------------- 1 | # Welcome 2 | 3 | In this small tutorial we will migrate a very simple web app to a webpack-built app. 4 | 5 | You'll learn: 6 | 7 | * How to 8 | 9 | Click on the next button to continue with the next step. -------------------------------------------------------------------------------- /tutorials/getting-started/1.1 installing-webpack/README.md: -------------------------------------------------------------------------------- 1 | # Installing webpack 2 | 3 | You need to have [node.js](https://nodejs.org) installed. 4 | 5 | ``` sh 6 | $ npm install webpack -g 7 | ``` 8 | 9 | > This makes the webpack command available. 10 | -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.1 normal-app/app.coffee: -------------------------------------------------------------------------------- 1 | $ -> 2 | # Model: 3 | userAgent = window.navigator.userAgent 4 | 5 | # View: 6 | view = 7 | render: (ua) -> 8 | $("#user-agent").text ua 9 | 10 | # Controller (render the model): 11 | view.render userAgent 12 | -------------------------------------------------------------------------------- /tutorials/getting-started/1.0 welcome/README.md: -------------------------------------------------------------------------------- 1 | # Welcome 2 | 3 | This small tutorial will guide you through a simple example. 4 | 5 | You'll learn: 6 | 7 | * How to install webpack 8 | * How to use webpack 9 | * How to use loaders 10 | * How to use the development server 11 | -------------------------------------------------------------------------------- /tutorials/getting-started/1.6 config-file/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: "./entry.js", 3 | output: { 4 | path: __dirname, 5 | filename: "bundle.js" 6 | }, 7 | module: { 8 | loaders: [ 9 | { test: /\.css$/, loader: "style!css" } 10 | ] 11 | } 12 | }; -------------------------------------------------------------------------------- /tutorials/getting-started/1.8 watch-mode/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: "./entry.js", 3 | output: { 4 | path: __dirname, 5 | filename: "bundle.js" 6 | }, 7 | module: { 8 | loaders: [ 9 | { test: /\.css$/, loader: "style!css" } 10 | ] 11 | } 12 | }; -------------------------------------------------------------------------------- /tutorials/getting-started/1.5 binding-loaders/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: "./entry.js", 3 | module: { 4 | loaders: [ 5 | { test: /\.css$/, loader: "style!css" } 6 | ] 7 | }, 8 | output: { 9 | path: __dirname, 10 | filename: "bundle.js" 11 | } 12 | }; -------------------------------------------------------------------------------- /app/docsearch.js: -------------------------------------------------------------------------------- 1 | require("./onContentLoaded")(function(event) { 2 | var search = docsearch({ 3 | inputSelector: '#docsearch', 4 | apiKey: '93950c6eda05068a6f0649e4a7f7546e', 5 | indexName: 'webpack', 6 | debug: false, 7 | enhancedSearchInput: true 8 | }); 9 | }) 10 | -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.3 coffee-script/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: "./app.coffee", 3 | output: { 4 | path: __dirname, 5 | filename: "bundle.js" 6 | }, 7 | module: { 8 | loaders: [ 9 | { test: /\.coffee$/, loader: "coffee-loader" } 10 | ] 11 | } 12 | }; -------------------------------------------------------------------------------- /tutorials/getting-started/1.7 pretty-output/README.md: -------------------------------------------------------------------------------- 1 | # A prettier output 2 | 3 | If the project grows the compilation may take a bit longer. So we want to display some kind of progress bar. And we want colors... 4 | 5 | We can achieve this with 6 | 7 | ``` text 8 | webpack --progress --colors 9 | ``` 10 | -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.7 other-resources/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |

Hello World.

8 |

Your User-Agent is:

9 | 10 | 11 | -------------------------------------------------------------------------------- /app/css/tutorial.styl: -------------------------------------------------------------------------------- 1 | @import 'variables.styl' 2 | @import 'mixins.styl'; 3 | @import 'general.styl' 4 | @import 'sidebar.styl'; 5 | @import 'logo.styl'; 6 | @import 'code.styl'; 7 | @import 'deprecation.styl'; 8 | 9 | 10 | iframe.tutorial-iframe 11 | width: 100% 12 | height: 200px 13 | border: 3px dashed #333 14 | 15 | -------------------------------------------------------------------------------- /lib/extractRegExpFromText.js: -------------------------------------------------------------------------------- 1 | module.exports = function extractRegExpFromText(text, regExp, postprocessFn) { 2 | var array = []; 3 | 4 | var match; 5 | while(match = regExp.exec(text)) { 6 | var link = postprocessFn(match[1]); 7 | if(array.indexOf(link) < 0) 8 | array.push(link); 9 | } 10 | 11 | return array; 12 | } 13 | -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.1 normal-app/app.coffee.js: -------------------------------------------------------------------------------- 1 | // Generated by CoffeeScript 1.6.3 2 | $(function() { 3 | var userAgent, view; 4 | userAgent = window.navigator.userAgent; 5 | view = { 6 | render: function(ua) { 7 | return $("#user-agent").text(ua); 8 | } 9 | }; 10 | return view.render(userAgent); 11 | }); 12 | -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.2 lets-webpack/app.coffee.js: -------------------------------------------------------------------------------- 1 | // Generated by CoffeeScript 1.6.3 2 | $(function() { 3 | var userAgent, view; 4 | userAgent = window.navigator.userAgent; 5 | view = { 6 | render: function(ua) { 7 | return $("#user-agent").text(ua); 8 | } 9 | }; 10 | return view.render(userAgent); 11 | }); 12 | -------------------------------------------------------------------------------- /app/css/anchor.styl: -------------------------------------------------------------------------------- 1 | .anchor 2 | display: none 3 | 4 | h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover 5 | .anchor 6 | display: inline-block 7 | font-size: 70% 8 | text-align: right 9 | margin-left: -40px 10 | width: 40px 11 | vertical-align: top 12 | &:hover, &:focus 13 | text-decoration: none 14 | font-weight: 700 15 | -------------------------------------------------------------------------------- /tutorials/getting-started/1.6 config-file/README.md: -------------------------------------------------------------------------------- 1 | # A config file 2 | 3 | We want to move the config options into a config file: 4 | 5 | $$$ files 6 | 7 | Now we can just run: 8 | 9 | ``` text 10 | webpack 11 | ``` 12 | 13 | to compile: 14 | 15 | $$$ output 16 | 17 | > The webpack command-line will try to load the file `webpack.config.js` in the current directory. 18 | -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.6 external-depencencies/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |

Hello World.

9 |

Your User-Agent is:

10 | 11 | 12 | -------------------------------------------------------------------------------- /app/css/doc.styl: -------------------------------------------------------------------------------- 1 | @import 'variables.styl' 2 | @import 'mixins.styl'; 3 | @import 'general.styl' 4 | @import 'sidebar.styl'; 5 | @import 'logo.styl'; 6 | @import 'contents.styl'; 7 | @import 'code.styl'; 8 | @import 'anchor.styl'; 9 | @import 'deprecation.styl'; 10 | 11 | .loading 12 | transition: opacity 1s linear, background 1s linear 13 | background: white 14 | opacity: 0 15 | 16 | .wikieditlink 17 | font-weight: bold 18 | -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.5 modules/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // the entry point 3 | entry: "./app.coffee", 4 | 5 | output: { 6 | // the output path 7 | path: __dirname, 8 | 9 | // the output filename 10 | filename: "bundle.js" 11 | }, 12 | 13 | module: { 14 | loaders: [ 15 | // support for coffeescript files 16 | { test: /\.coffee$/, loader: "coffee-loader" } 17 | ] 18 | } 19 | }; -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.4 webpack-config/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // the entry point 3 | entry: "./app.coffee", 4 | 5 | output: { 6 | // the output path 7 | path: __dirname, 8 | 9 | // the output filename 10 | filename: "bundle.js" 11 | }, 12 | 13 | module: { 14 | loaders: [ 15 | // support for coffeescript files 16 | { test: /\.coffee$/, loader: "coffee-loader" } 17 | ] 18 | } 19 | }; -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.6 external-depencencies/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // the entry point 3 | entry: "./app.coffee", 4 | 5 | output: { 6 | // the output path 7 | path: __dirname, 8 | 9 | // the output filename 10 | filename: "bundle.js" 11 | }, 12 | 13 | module: { 14 | loaders: [ 15 | // support for coffeescript files 16 | { test: /\.coffee$/, loader: "coffee-loader" } 17 | ] 18 | } 19 | }; -------------------------------------------------------------------------------- /layouts/logo.html: -------------------------------------------------------------------------------- 1 | 10 |
webpack
11 |
MODULE BUNDLER
12 | -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.1 normal-app/README.md: -------------------------------------------------------------------------------- 1 | # A "normal" app 2 | 3 | Let's begin with a simple web app and let's try to make use of webpack step by step. 4 | 5 | $$$ files 6 | 7 | ## Publishing 8 | 9 | For publishing this app, you first need to compile `app.coffee` to `app.coffee.js` and `style.less` to `style.less.css`. Than you may open the app. 10 | 11 | $$$ index.html 12 | 13 | ## Summary 14 | 15 | That's a really simple app. 16 | 17 | -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.1 normal-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |

Hello World.

10 |

Your User-Agent is:

11 | 12 | 13 | -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.2 lets-webpack/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |

Hello World.

10 |

Your User-Agent is:

11 | 12 | 13 | -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.5 modules/README.md: -------------------------------------------------------------------------------- 1 | ## Let's make modules 2 | 3 | Because we use webpack now, we can use `require` to load other modules. 4 | 5 | We first want to split our code into model, view and controller. 6 | 7 | We use CommonJS style modules in this example, but AMD style modules are also possible (or mix both styles). 8 | 9 | $$$ files 10 | 11 | ### Summary 12 | 13 | Webpack now takes care of our coffeescript files and bundle them together. 14 | 15 | $$$ index.html -------------------------------------------------------------------------------- /tutorials/getting-started/1.2 setup-compilation/README.md: -------------------------------------------------------------------------------- 1 | # Setup the compilation 2 | 3 | Start with a empty directory. 4 | 5 | Create these files: 6 | 7 | $$$ files 8 | 9 | Then run the following: 10 | 11 | ``` sh 12 | $ webpack ./entry.js bundle.js 13 | ``` 14 | 15 | It will compile your file and create a bundle file. 16 | 17 | If successful it displays something like this: 18 | 19 | $$$ output 20 | 21 | Open `index.html` in your browser. It should display `It works.` 22 | 23 | $$$ index.html 24 | -------------------------------------------------------------------------------- /layouts/header.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | webpack, the
    5 |
  • production 6 |
  • unbiased 7 |
  • flexible 8 |
  • extensible 9 |
  • open source 10 |
module bundler.
11 |

 

12 |
13 |
14 |
15 | -------------------------------------------------------------------------------- /app/downloadWiki.js: -------------------------------------------------------------------------------- 1 | module.exports = function downloadWiki(wiki, callback) { 2 | var request = new XMLHttpRequest(); 3 | request.open("GET", "//github-wiki.herokuapp.com/webpack/docs/" + wiki, true); 4 | request.onreadystatechange = function() { 5 | if(request.readyState === 4) { 6 | if(request.status !== 200) { 7 | return callback(new Error("Statuscode is " + request.status)); 8 | } else { 9 | return callback(null, request.responseText); 10 | } 11 | } 12 | }; 13 | request.send(null); 14 | }; 15 | -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.4 webpack-config/README.md: -------------------------------------------------------------------------------- 1 | # Use a configuration file 2 | 3 | We want to put our configuration into a file to we don't have to type all the command line arguments to compile. 4 | 5 | webpack use `webpack.config.js` as configuration if found in the current directory 6 | 7 | $$$ files 8 | 9 | ### Create The Bundle 10 | 11 | Now we just have to call webpack without arguments. 12 | 13 | ``` sh 14 | webpack 15 | ``` 16 | 17 | ## Summary 18 | 19 | Our configuration is now in a file. 20 | 21 | $$$ index.html 22 | -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.7 other-resources/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // the entry point 3 | entry: "./app.coffee", 4 | 5 | output: { 6 | // the output path 7 | path: __dirname, 8 | 9 | // the output filename 10 | filename: "bundle.js" 11 | }, 12 | 13 | module: { 14 | loaders: [ 15 | // support for less files 16 | { test: /\.less$/, loader: "style-loader!css-loader!less-loader" }, 17 | 18 | // support for coffeescript files 19 | { test: /\.coffee$/, loader: "coffee-loader" } 20 | ] 21 | } 22 | }; -------------------------------------------------------------------------------- /app/css/code.styl: -------------------------------------------------------------------------------- 1 | 2 | /* Code highlighting */ 3 | code 4 | .comment 5 | color: #998 6 | font-style: italic 7 | .keyword 8 | color: #333 9 | font-weight: bold 10 | .number 11 | color: #099 12 | .string 13 | color: #d14 14 | .tag 15 | color: #000080 16 | font-weight: normal 17 | .attribute 18 | color: #008080 19 | .regexp 20 | color: #009926 21 | .preprocessor 22 | color: #999 23 | font-weight: bold 24 | .deletion 25 | background: #fdd 26 | display: block 27 | .addition 28 | background: #dfd 29 | display: block 30 | -------------------------------------------------------------------------------- /layouts/deprecation.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | webpack v1 is deprecated. We encourage all developers to upgrade to 4 | webpack 2. 5 |
6 |
7 | Follow our migration guide 9 | or refer to webpack 2 documentation 11 | for more info. 12 |
13 |
14 | -------------------------------------------------------------------------------- /tutorials/getting-started/1.5 binding-loaders/README.md: -------------------------------------------------------------------------------- 1 | # Binding loaders 2 | 3 | We don't want to write such long requires `require("!style!css!./style.css");`. 4 | 5 | We can bind file extensions to loaders so we just need to write: `require("./style.css")` 6 | 7 | $$$ files 8 | 9 | Run the compilation with: 10 | 11 | ``` text 12 | webpack ./entry.js bundle.js --module-bind 'css=style!css' 13 | ``` 14 | 15 | > Some environments may require double quotes: --module-bind "css=style!css" 16 | 17 | You should see the same result: 18 | 19 | $$$ index.html 20 | -------------------------------------------------------------------------------- /app/css/contents.styl: -------------------------------------------------------------------------------- 1 | .contents 2 | float: right 3 | min-width: 200px 4 | background-color: #fff 5 | border: 1px solid #ddd 6 | box-shadow: 0 .5em 1em 0 rgba(0,0,0,.10); 7 | margin: 1em 8 | padding: 2em 1em 1em 1em 9 | font-size: .8em 10 | ul 11 | margin: 0 12 | padding: 0 13 | li 14 | padding: 0 15 | margin: 0 0 1em 0 16 | list-style: none 17 | color: #333 18 | ul 19 | margin: 0 20 | padding: 0 21 | border-top: 1px solid #ddd 22 | li 23 | margin: 0 24 | padding: .5em 0 0 1em 25 | border: none 26 | color: #000 27 | -------------------------------------------------------------------------------- /tutorials/getting-started/1.8 watch-mode/README.md: -------------------------------------------------------------------------------- 1 | # Watch mode 2 | 3 | We don't want to manually recompile after every change... 4 | 5 | ``` text 6 | webpack --progress --colors --watch 7 | ``` 8 | 9 | Webpack can cache unchanged modules and output files between compilations. 10 | 11 | $$$ files 12 | 13 | > When using watch mode, webpack installs file watchers to all files, which were used in the compilation process. If any change is detected, it'll run the compilation again. When caching is enabled, webpack keeps each module in memory and will reuse it if it isn't changed. 14 | -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.8 templates/README.md: -------------------------------------------------------------------------------- 1 | Our html still contains another static resource: `style.less.css` (compiled from `style.less`). 2 | 3 | ... but there is still a static resource hidden. The html code. 4 | 5 | You guess it, we can bundle it too. Because I like `jade` templates: 6 | 7 | ``` sh 8 | npm install jade-loader 9 | ``` 10 | 11 | $$$ files 12 | 13 | ## Summary 14 | 15 | So finally we really moved **all** static resources into the bundle! 16 | 17 | > Note: This is again of course not suitable for a progressively enhanced application. 18 | 19 | $$$ index.html -------------------------------------------------------------------------------- /app/css/logo.styl: -------------------------------------------------------------------------------- 1 | .logo 2 | width: 100% 3 | height: 220px 4 | position: relative 5 | overflow: hidden 6 | 7 | .name 8 | logoFont() 9 | font-size: 2em 10 | font-weight: bold 11 | padding-left: 50% 12 | margin-left: -70px 13 | line-height: 1.2em 14 | 15 | .tagline 16 | logoFont() 17 | font-size: 0.8em 18 | padding-left: 50% 19 | margin-left: -30px 20 | 21 | .cube 22 | cube(100px, rgba(126,169,232,0.5)) 23 | spin() 24 | margin: -50px 0 0 -50px 25 | top: 50% 26 | left: 50% 27 | 28 | .cube-inner 29 | cube(50px, rgba(16,58,177,0.5)) 30 | margin: -25px 0 0 -25px 31 | spin(fastspin) 32 | -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.6 external-depencencies/README.md: -------------------------------------------------------------------------------- 1 | We use jQuery in the app. But wait jQuery is javascript. Should it not be a dependency which can be required? 2 | 3 | Yes. Let's create a `jquery` web module so it can be required: 4 | 5 | ## jquery web module 6 | 7 | * Create a folder `web_modules`. 8 | * Put the jquery library into this folder as `jquery.js` 9 | 10 | $$$ files 11 | 12 | Not relative require calls are looked up in modules folders. For web modules we can use a folder `"web_modules"`. 13 | 14 | ## Summary 15 | 16 | All javascript stuff is now bundled. 17 | 18 | $$$ index.html -------------------------------------------------------------------------------- /app/css/landing.styl: -------------------------------------------------------------------------------- 1 | @import 'variables.styl' 2 | @import 'mixins.styl'; 3 | @import 'general.styl' 4 | @import 'sidebar.styl'; 5 | @import 'logo.styl'; 6 | @import 'deprecation.styl'; 7 | 8 | 9 | .intro 10 | margin: 30px 0 50px 0 11 | font-size: 1.5em 12 | text-align: center 13 | strong 14 | logoFont(); 15 | .types 16 | display: inline-block 17 | position: relative 18 | top: 51px 19 | padding: 0 5px 20 | margin: 0 21 | li 22 | list-style: none 23 | padding: 0 24 | margin: 0 25 | 26 | .feature 27 | border: 2px solid #CCC 28 | background: #F5F5F5 29 | padding: 5px 30 | margin: 10px 31 | -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.3 coffee-script/README.md: -------------------------------------------------------------------------------- 1 | # Preprocess coffeescript 2 | 3 | We want webpack to compile coffeescript to javascript while compiling. 4 | 5 | ## Install the coffeescript loader 6 | 7 | ``` sh 8 | npm install coffee-loader 9 | ``` 10 | 11 | ## Create The Bundle 12 | 13 | ``` sh 14 | webpack app.coffee bundle.js --module-bind coffee 15 | ``` 16 | 17 | This binds the extension `.coffee` to the loader `coffee-loader`. 18 | 19 | Note: The generated file `app.coffee.js` can be deleted. 20 | 21 | ## Summary 22 | 23 | webpack now compiles coffeescript to javascript for us. 24 | 25 | $$$ index.html 26 | -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.8 templates/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // the entry point 3 | entry: "./app.coffee", 4 | 5 | output: { 6 | // the output path 7 | path: __dirname, 8 | 9 | // the output filename 10 | filename: "bundle.js" 11 | }, 12 | 13 | module: { 14 | loaders: [ 15 | // support for jade files 16 | { test: /\.jade$/, loader: "jade-loader" }, 17 | 18 | // support for less files 19 | { test: /\.less$/, loader: "style-loader!css-loader!less-loader" }, 20 | 21 | // support for coffeescript files 22 | { test: /\.coffee$/, loader: "coffee-loader" } 23 | ] 24 | } 25 | }; -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.2 lets-webpack/README.md: -------------------------------------------------------------------------------- 1 | # Let's webpack 2 | 3 | In the first step we want to use webpack for bundling the single file. 4 | 5 | We care for handling coffeescript in the next step. For now we just bundle the generated js file. 6 | 7 | It's assumed you have webpack installed. See others guides for instructions. 8 | 9 | ## Create The Bundle 10 | 11 | ``` 12 | webpack app.coffee.js bundle.js 13 | ``` 14 | 15 | ## Use The Bundle 16 | 17 | We can remove the `app.coffee.js` file from the html and use the bundled version instead: 18 | 19 | $$$ files 20 | 21 | ## Summary 22 | 23 | The single file `app.coffee.js` now goes though webpack. 24 | 25 | $$$ index.html 26 | -------------------------------------------------------------------------------- /tutorials/getting-started/1.3 second-file/README.md: -------------------------------------------------------------------------------- 1 | # Second file 2 | 3 | Next, we will move some code into an extra file. 4 | 5 | $$$ files 6 | 7 | And recompile with: 8 | 9 | ``` sh 10 | $ webpack ./entry.js bundle.js 11 | ``` 12 | 13 | Update your browser window and you should see the text `It works from content.js.`. 14 | 15 | $$$ index.html 16 | 17 | > webpack will analyze your entry file for dependencies to other files. These files (called modules) are included in your `bundle.js` too. webpack will give each module a unique id and save all modules accessible by id in the `bundle.js` file. Only the entry module is executed on startup. A small runtime provides the `require` function and executes the dependencies when required. 18 | -------------------------------------------------------------------------------- /app/css/sidebar.styl: -------------------------------------------------------------------------------- 1 | .nav 2 | background-color: #eee 3 | 4 | .sidebar 5 | font-size: 0.8em 6 | h1 7 | font-size: 18pt 8 | ul 9 | margin: 0 10 | padding: 0 11 | li 12 | text-transform: uppercase 13 | padding: 0 14 | margin: 0 0 1em 0 15 | list-style: none 16 | color: #333 17 | ul 18 | margin: 0 19 | padding: 0 20 | border-top: 1px solid #ddd 21 | li 22 | margin: 0 23 | padding: .5em 0 0 1em 24 | text-transform: none 25 | border: none 26 | color: #000 27 | font-size: 1.2em 28 | li 29 | font-size: 1em 30 | .active 31 | font-weight: bold 32 | color: #333 33 | display: block 34 | border-right: 4px solid #ddd 35 | 36 | .searchbox 37 | margin: 20px 0 15px 38 | -------------------------------------------------------------------------------- /app/disqus.js: -------------------------------------------------------------------------------- 1 | window.disqus_shortname = "webpack"; 2 | 3 | var dsq = document.createElement("script"); 4 | dsq.type = "text/javascript"; 5 | dsq.async = true; 6 | dsq.src = "//" + window.disqus_shortname + ".disqus.com/embed.js"; 7 | (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); 8 | 9 | exports.update = function updatePage(identifier) { 10 | if(typeof DISQUS === "undefined") { 11 | setTimeout(function() { 12 | updatePage(identifier); 13 | }, 1000); 14 | return; 15 | } 16 | DISQUS.reset({ 17 | reload: true, 18 | config: function() { 19 | this.page.identifier = identifier; 20 | this.page.url = location + ""; 21 | this.page.title = document.title; 22 | } 23 | }); 24 | }; 25 | -------------------------------------------------------------------------------- /tutorials/getting-started/1.9 development-server/README.md: -------------------------------------------------------------------------------- 1 | # Development server 2 | 3 | The development server is even better. 4 | 5 | ``` text 6 | npm install webpack-dev-server -g 7 | ``` 8 | 9 | ``` text 10 | webpack-dev-server --progress --colors 11 | ``` 12 | 13 | This binds a small express server on localhost:8080 which serves your static assets as well as the bundle (compiled automatically). It automatically updates the browser page when a bundle is recompiled (SockJS). Open [http://localhost:8080/webpack-dev-server/bundle](http://localhost:8080/webpack-dev-server/bundle) in your browser. 14 | 15 | > The dev server uses webpack's watch mode. It also prevents webpack from emitting the resulting files to disk. Instead it keeps and serves the resulting files from memory. 16 | -------------------------------------------------------------------------------- /tutorials/getting-started/1.4 first-loader/README.md: -------------------------------------------------------------------------------- 1 | # The first loader 2 | 3 | We want to add a CSS file to our application. 4 | 5 | webpack can only handle JavaScript natively, so we need the `css-loader` to process CSS files. We also need the `style-loader` to apply the styles in the CSS file. 6 | 7 | Run `npm install css-loader style-loader` to install the loaders. (They need to be installed locally, without `-g`) This will create a `node_modules` folder for you, in which the loaders will live. 8 | 9 | Let's use them: 10 | 11 | $$$ files 12 | 13 | Recompile and update your browser to see your application with yellow background. 14 | 15 | $$$ index.html 16 | 17 | > By prefixing loaders to a module request, the module went through a loader pipeline. These loaders transform the file content in specific ways. After these transformations are applied, the result is a JavaScript module. 18 | -------------------------------------------------------------------------------- /app/googleAnalytics.js: -------------------------------------------------------------------------------- 1 | if(typeof GA_TRACKING_CODE !== "undefined") { 2 | (function(window, document, script, url, r, tag, firstScriptTag) { 3 | window['GoogleAnalyticsObject']=r; 4 | window[r] = window[r] || function() { 5 | (window[r].q = window[r].q || []).push(arguments) 6 | }; 7 | window[r].l = 1*new Date(); 8 | tag = document.createElement(script), 9 | firstScriptTag = document.getElementsByTagName(script)[0]; 10 | tag.async = 1; 11 | tag.src = url; 12 | firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 13 | })( 14 | window, 15 | document, 16 | 'script', 17 | '//www.google-analytics.com/analytics.js', 18 | 'ga' 19 | ); 20 | 21 | var ga = window.ga; 22 | 23 | ga('create', GA_TRACKING_CODE, GA_TRACKING_CONFIG); 24 | ga('send', 'pageview'); 25 | 26 | module.exports = function() { 27 | return window.ga.apply(window.ga, arguments); 28 | }; 29 | } else { 30 | module.exports = function() {} 31 | } 32 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [documentation](https://webpack.github.io/docs/) 2 | 3 | 4 | # NEW DOCS HAVE BEEN MOVED TO [webpack/webpack.js.org](https://github.com/webpack/webpack.js.org) 5 | # ATTENTION: If you are planning on updating the content here you must update the [WIKI](https://github.com/webpack/docs/wiki). 6 | # If you see an issue, or want to make a change, please submit an issue and pull request on the new page. We are working to migrate this content over to the new repo. 7 | 8 | The documentation is generated from the contents of this [wiki](https://github.com/webpack/docs/wiki). Please make any content edits there. 9 | 10 | ## building the documentation 11 | If you would like to edit the layout, styling or scripts of the documentation, please follow these steps: 12 | 13 | * Install [Node.js](https://nodejs.org/) if you have not already 14 | * `git clone git://github.com/webpack/docs && cd docs` 15 | * `npm install` 16 | * `npm start` 17 | * Visit [http://localhost:8088](http://localhost:8088) to preview your changes before making a pull request. 18 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var ExtractTextPlugin = require("extract-text-webpack-plugin"); 2 | module.exports = { 3 | entry: { 4 | doc: "./app/doc.js", 5 | landing: "./app/landing.js", 6 | tutorial: "./app/tutorial.js", 7 | "404": "./app/404.js" 8 | }, 9 | output: { 10 | path: __dirname + "/dist", 11 | publicPath: "", 12 | filename: "js/[name].js", 13 | chunkFilename: "js/[id].js" 14 | }, 15 | module: { 16 | loaders: [ 17 | { test: /\.styl$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader?browsers=last 2 versions!stylus-loader") }, 18 | { test: /\.css$/, loader: "style-loader!css-loader!autoprefixer-loader?browsers=last 2 versions" }, 19 | { test: /\.woff$/, loader: "url-loader?prefix=font/&limit=5000&minetype=application/font-woff" }, 20 | { test: /\.ttf$/, loader: "file-loader?prefix=font/" }, 21 | { test: /\.eot$/, loader: "file-loader?prefix=font/" }, 22 | { test: /\.svg$/, loader: "file-loader?prefix=font/" }, 23 | ] 24 | }, 25 | plugins: [ 26 | new ExtractTextPlugin("css/[name].css") 27 | ] 28 | }; -------------------------------------------------------------------------------- /tutorials/migrate-to-webpack/1.7 other-resources/README.md: -------------------------------------------------------------------------------- 1 | Our html still contains another static resource: `style.less.css` (compiled from `style.less`). 2 | 3 | We want it bundled too! With webpack that's easy: 4 | 5 | ## stylesheets 6 | 7 | We need more loaders: 8 | 9 | * One to transform less to css: `less-loader` 10 | * One to transform css to javascript: `css-loader` 11 | * One to add css to the DOM: `style-loader` 12 | 13 | ``` sh 14 | npm install less-loader css-loader style-loader 15 | ``` 16 | 17 | These loaders need to be applied for less files. We can configure this in the configuration and just `require` the stylesheet. 18 | 19 | $$$ files 20 | 21 | Because webpack can handle `less` the extra step of compiling the `less` file can be omitted. 22 | 23 | Note: You can remove the generated file `styles.less.css`. 24 | 25 | ## Summary 26 | 27 | We moved all referenced static resources into the bundle... 28 | 29 | > Note: If you write a single page application this step is useful, but if you write a progressively enhanced application you shouldn't do it. 30 | 31 | $$$ index.html -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-docs", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "grunt development" 7 | }, 8 | "dependencies": { 9 | "async": "^1.4.1", 10 | "autoprefixer-loader": "^2.0.0", 11 | "coffee-loader": "~0.7.2", 12 | "coffee-script": "^1.10.0", 13 | "css-loader": "~0.15.6", 14 | "extract-text-webpack-plugin": "^0.8.2", 15 | "file-loader": "~0.8.4", 16 | "grunt": "~0.4.2", 17 | "grunt-cli": "~0.1.13", 18 | "grunt-contrib-clean": "~0.6.0", 19 | "grunt-contrib-connect": "~0.11.2", 20 | "grunt-contrib-watch": "~0.6.1", 21 | "grunt-gh-pages": "~0.10.0", 22 | "grunt-webpack": "~1.0.2", 23 | "html-minifier": "~0.7.2", 24 | "jade": "^1.11.0", 25 | "jade-loader": "~0.7.1", 26 | "less": "^2.5.1", 27 | "less-loader": "~2.2.0", 28 | "lru-cache": "~2.6.5", 29 | "marked": "~0.3.0", 30 | "matchdep": "~0.3.0", 31 | "raw-loader": "~0.5.0", 32 | "style-loader": "~0.12.3", 33 | "stylus-loader": "~1.2.1", 34 | "url-loader": "~0.5.2", 35 | "webpack": "^1.11.0", 36 | "webpack-dev-server": "^1.10.1" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /lib/highlight.js/json.js: -------------------------------------------------------------------------------- 1 | module.exports = function(hljs) { 2 | var LITERALS = {literal: 'true false null'}; 3 | var TYPES = [ 4 | hljs.QUOTE_STRING_MODE, 5 | hljs.C_NUMBER_MODE 6 | ]; 7 | var VALUE_CONTAINER = { 8 | className: 'value', 9 | end: ',', endsWithParent: true, excludeEnd: true, 10 | contains: TYPES, 11 | keywords: LITERALS 12 | }; 13 | var OBJECT = { 14 | begin: '{', end: '}', 15 | contains: [ 16 | { 17 | className: 'attribute', 18 | begin: '\\s*"', end: '"\\s*:\\s*', excludeBegin: true, excludeEnd: true, 19 | contains: [hljs.BACKSLASH_ESCAPE], 20 | illegal: '\\n', 21 | starts: VALUE_CONTAINER 22 | } 23 | ], 24 | illegal: '\\S' 25 | }; 26 | var ARRAY = { 27 | begin: '\\[', end: '\\]', 28 | contains: [hljs.inherit(VALUE_CONTAINER, {className: null})], // inherit is also a workaround for a bug that makes shared modes with endsWithParent compile only the ending of one of the parents 29 | illegal: '\\S' 30 | }; 31 | TYPES.splice(TYPES.length, 0, OBJECT, ARRAY); 32 | return { 33 | contains: TYPES, 34 | keywords: LITERALS, 35 | illegal: '\\S' 36 | }; 37 | }; -------------------------------------------------------------------------------- /layouts/tutorial.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | {{title}} 13 | 14 | 15 | 16 |
17 |
18 | 27 | 28 |
29 | {{include deprecation}} 30 | 31 |
32 |
33 | {{content}} 34 |
35 |
36 |
37 | 38 |
39 |
40 | Fork me on GitHub 41 | 42 | 43 | -------------------------------------------------------------------------------- /layouts/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 404 12 | 13 | 14 | 15 |
16 |
17 | 26 | 27 |
28 | 29 |
30 | 33 |
34 | 35 |
36 |
37 | 38 |
39 |
40 |
41 | 42 |
43 |
44 | Fork me on GitHub 45 | 46 | -------------------------------------------------------------------------------- /app/FullTextSearcher.js: -------------------------------------------------------------------------------- 1 | var extractRegExpFromText = require("../lib/extractRegExpFromText"); 2 | var Searcher = require("../lib/fuse.js/Searcher"); 3 | 4 | function FullTextSearcher(searchString) { 5 | this.fuseSearchers = this.tokenize(searchString).map(function(item) { 6 | return new Searcher(item, { 7 | distance: item.length * 10, 8 | threshold: 0.8 9 | }); 10 | }); 11 | } 12 | 13 | module.exports = FullTextSearcher; 14 | 15 | FullTextSearcher.prototype.scanDocument = function(title, md) { 16 | title = this.tokenize(title); 17 | md = this.tokenize(md); 18 | var scores = this.fuseSearchers.map(function() { return 0 }); 19 | scoreItems(title, this.fuseSearchers); 20 | scores = scores.map(function(s) { return s*10; }); 21 | scoreItems(md, this.fuseSearchers); 22 | return { 23 | score: scores.length > 0 ? scores.reduce(function(a, b) { return a + b; }, 0) * 24 | scores.map(function(s) { return s; }, this).reduce(function(a, b) { return Math.min(a, b); }) : 0, 25 | scores: scores 26 | }; 27 | 28 | function scoreItems(items, fuseSearchers) { 29 | items.forEach(function(item) { 30 | fuseSearchers.forEach(function(searcher, idx) { 31 | var result = searcher.search(item); 32 | if(result.isMatch) { 33 | scores[idx] += (1 - result.score) / items.length; 34 | } 35 | }); 36 | }); 37 | } 38 | } 39 | 40 | FullTextSearcher.prototype.tokenize = function(str) { 41 | return extractRegExpFromText(str, /([\w\d\-\_\.]+)/gi, function(s) { return s; }); 42 | }; -------------------------------------------------------------------------------- /app/css/reset.styl: -------------------------------------------------------------------------------- 1 | // Based on [Eric Meyer's reset](http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) 2 | 3 | reset-box-model() 4 | margin: 0 5 | padding: 0 6 | border: 0 7 | outline: 0 8 | 9 | reset-font() 10 | font-weight: inherit 11 | font-style: inherit 12 | font-family: inherit 13 | font-size: 100% 14 | vertical-align: baseline 15 | 16 | reset-body() 17 | line-height: 1 18 | color: black 19 | background: white 20 | 21 | reset-table() 22 | border-collapse: separate 23 | border-spacing: 0 24 | vertical-align: middle 25 | 26 | reset-table-cell() 27 | text-align: left 28 | font-weight: normal 29 | vertical-align: middle 30 | 31 | reset-html5() 32 | article, aside, canvas, details, figcaption, 33 | figure, footer, header, hgroup, menu, nav, 34 | section, summary, main 35 | reset-box-model() 36 | display: block 37 | audio, canvas, video 38 | display inline-block 39 | *display inline 40 | *zoom 1 41 | audio:not([controls]),[hidden] 42 | display none 43 | 44 | html, body, div, span, applet, object, iframe, 45 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 46 | a, abbr, acronym, address, big, cite, code, 47 | del, dfn, em, img, ins, kbd, q, s, samp, 48 | small, strike, strong, sub, sup, tt, var, 49 | dl, dt, dd, ol, ul, li, 50 | fieldset, form, label, legend, 51 | table, caption, tbody, tfoot, thead, tr, th, td 52 | reset-box-model() 53 | reset-font() 54 | body 55 | reset-body() 56 | ol, ul 57 | list-style: none 58 | table 59 | reset-table() 60 | caption, th, td 61 | reset-table-cell() 62 | a img 63 | border: none 64 | -------------------------------------------------------------------------------- /app/onContentLoaded.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * contentloaded.js 3 | * 4 | * Author: Diego Perini (diego.perini at gmail.com) 5 | * Summary: cross-browser wrapper for DOMContentLoaded 6 | * Updated: 20101020 7 | * License: MIT 8 | * Version: 1.2 9 | * 10 | * URL: 11 | * http://javascript.nwbox.com/ContentLoaded/ 12 | * http://javascript.nwbox.com/ContentLoaded/MIT-LICENSE 13 | * 14 | */ 15 | 16 | // @win window reference 17 | // @fn function reference 18 | function contentLoaded(win, fn) { 19 | 20 | var done = false, top = true, 21 | 22 | doc = win.document, root = doc.documentElement, 23 | 24 | add = doc.addEventListener ? 'addEventListener' : 'attachEvent', 25 | rem = doc.addEventListener ? 'removeEventListener' : 'detachEvent', 26 | pre = doc.addEventListener ? '' : 'on', 27 | 28 | init = function(e) { 29 | if (e.type == 'readystatechange' && doc.readyState != 'complete') return; 30 | (e.type == 'load' ? win : doc)[rem](pre + e.type, init, false); 31 | if (!done && (done = true)) fn.call(win, e.type || e); 32 | }, 33 | 34 | poll = function() { 35 | try { root.doScroll('left'); } catch(e) { setTimeout(poll, 50); return; } 36 | init('poll'); 37 | }; 38 | 39 | if (doc.readyState == 'complete') fn.call(win, 'lazy'); 40 | else { 41 | if (doc.createEventObject && root.doScroll) { 42 | try { top = !win.frameElement; } catch(e) { } 43 | if (top) poll(); 44 | } 45 | doc[add](pre + 'DOMContentLoaded', init, false); 46 | doc[add](pre + 'readystatechange', init, false); 47 | win[add](pre + 'load', init, false); 48 | } 49 | 50 | } 51 | 52 | module.exports = function(fn) { 53 | contentLoaded(window, fn); 54 | }; -------------------------------------------------------------------------------- /lib/highlight.js/javascript.js: -------------------------------------------------------------------------------- 1 | module.exports = function(hljs) { 2 | return { 3 | keywords: { 4 | keyword: 5 | 'in if for while finally var new function do return void else break catch ' + 6 | 'instanceof with throw case default try this switch continue typeof delete ' + 7 | 'let yield const', 8 | literal: 9 | 'true false null undefined NaN Infinity' 10 | }, 11 | contains: [ 12 | hljs.APOS_STRING_MODE, 13 | hljs.QUOTE_STRING_MODE, 14 | hljs.C_LINE_COMMENT_MODE, 15 | hljs.C_BLOCK_COMMENT_MODE, 16 | hljs.C_NUMBER_MODE, 17 | { // "value" container 18 | begin: '(' + hljs.RE_STARTERS_RE + '|\\b(case|return|throw)\\b)\\s*', 19 | keywords: 'return throw case', 20 | contains: [ 21 | hljs.C_LINE_COMMENT_MODE, 22 | hljs.C_BLOCK_COMMENT_MODE, 23 | hljs.REGEXP_MODE, 24 | { // E4X 25 | begin: /;/, 26 | subLanguage: 'xml' 27 | } 28 | ], 29 | relevance: 0 30 | }, 31 | { 32 | className: 'function', 33 | beginWithKeyword: true, end: /{/, 34 | keywords: 'function', 35 | contains: [ 36 | { 37 | className: 'title', begin: /[A-Za-z$_][0-9A-Za-z$_]*/ 38 | }, 39 | { 40 | className: 'params', 41 | begin: /\(/, end: /\)/, 42 | contains: [ 43 | hljs.C_LINE_COMMENT_MODE, 44 | hljs.C_BLOCK_COMMENT_MODE 45 | ], 46 | illegal: /["'\(]/ 47 | } 48 | ], 49 | illegal: /\[|%/ 50 | } 51 | ] 52 | }; 53 | }; -------------------------------------------------------------------------------- /app/404.js: -------------------------------------------------------------------------------- 1 | require("./css/404.styl"); 2 | require("./googleAnalytics"); 3 | 4 | require("./onContentLoaded")(function(event) { 5 | var titleToLink = require("../lib/titleToLink"); 6 | var linkToTitle = require("../lib/linkToTitle"); 7 | 8 | var titleElement = document.getElementById("title"); 9 | var resultsElement = document.getElementById("results"); 10 | 11 | var pathname = location.pathname.substr(1); 12 | if(/404(\.html)?$/.test(pathname)) 13 | pathname = location.search.substr(2); 14 | var searchString = linkToTitle(pathname.replace(/\.html$/i, "")).trim(); 15 | document.title = titleElement.textContent = "Search '" + searchString + "'"; 16 | 17 | require(["../lib/extractRegExpFromText", "./downloadWiki", "./FullTextSearcher"], function(extractRegExpFromText, downloadWiki, FullTextSearcher) { 18 | var searcher = new FullTextSearcher(searchString); 19 | 20 | var processedWikis = {}; 21 | var matches = []; 22 | processWiki("contents"); 23 | 24 | function processWiki(name) { 25 | if(processedWikis["$"+name]) return; 26 | processedWikis["$"+name] = true; 27 | downloadWiki(name, function(err, md) { 28 | if(err) return; 29 | console.log("Searching in " + name); 30 | var links = extractRegExpFromText(md, /\[\[(?:[^\]\|]+\|\s*)?([a-z0-9 \-_\.]+)\]\]/gi, titleToLink); 31 | links.forEach(processWiki); 32 | if(name === "contents") return; 33 | var result = searcher.scanDocument(linkToTitle(name), md); 34 | var score = result.score; 35 | if(score > 0) { 36 | var element = document.createElement("li"); 37 | var linkElement = document.createElement("a"); 38 | linkElement.setAttribute("href", name + ".html"); 39 | linkElement.textContent = linkToTitle(name); 40 | element.appendChild(linkElement); 41 | for(var i = 0; i < matches.length; i++) { 42 | if(matches[i].score < score) { 43 | resultsElement.insertBefore(element, matches[i].element); 44 | matches.splice(i, 0, { score: score, element: element }); 45 | return; 46 | } 47 | } 48 | resultsElement.appendChild(element); 49 | matches.push({ score: score, element: element }); 50 | } 51 | }); 52 | } 53 | }); 54 | }); 55 | -------------------------------------------------------------------------------- /lib/diff.js/diff.js: -------------------------------------------------------------------------------- 1 | // import LCS if in node 2 | if (typeof LCS === 'undefined') 3 | var LCS = require('./lcs.js'); 4 | 5 | // Diff sequence 6 | // @param A - sequence of atoms - Array 7 | // @param B - sequence of atoms - Array 8 | // @param equals - optional comparator of atoms - returns true or false, 9 | // if not specified, triple equals operator is used 10 | // @returns Array - sequence of objects in a form of: 11 | // - operation: one of "none", "add", "delete" 12 | // - atom: the atom found in either A or B 13 | // Applying operations from diff sequence you should be able to transform A to B 14 | var diff = function (A, B, equals) { 15 | // We just compare atoms with default equals operator by default 16 | if (equals === undefined) 17 | equals = function (a, b) { return a === b; }; 18 | 19 | var diff = []; 20 | var i = 0, j = 0; 21 | var N = A.length, M = B.length, K = 0; 22 | 23 | while (i < N && j < M && equals(A[i], B[j])) 24 | i++, j++; 25 | 26 | while (i < N && j < M && equals(A[N-1], B[M-1])) 27 | N--, M--, K++; 28 | 29 | [].push.apply(diff, A.slice(0, i).map(function (atom) { 30 | return { operation: "none", atom: atom }; })); 31 | 32 | var lcs = LCS(A.slice(i, N), B.slice(j, M), equals); 33 | 34 | for (var k = 0; k < lcs.length; k++) { 35 | var atom = lcs[k]; 36 | var ni = customIndexOf.call(A, atom, i, equals); 37 | var nj = customIndexOf.call(B, atom, j, equals); 38 | 39 | // XXX ES5 map 40 | // Delete unmatched atoms from A 41 | [].push.apply(diff, A.slice(i, ni).map(function (atom) { 42 | return { operation: "delete", atom: atom }; 43 | })); 44 | 45 | // Add unmatched atoms from B 46 | [].push.apply(diff, B.slice(j, nj).map(function (atom) { 47 | return { operation: "add", atom: atom }; 48 | })); 49 | 50 | // Add the atom found in both sequences 51 | diff.push({ operation: "none", atom: atom }); 52 | 53 | i = ni + 1; 54 | j = nj + 1; 55 | } 56 | 57 | // Don't forget about the rest 58 | 59 | [].push.apply(diff, A.slice(i, N).map(function (atom) { 60 | return { operation: "delete", atom: atom }; 61 | })); 62 | 63 | [].push.apply(diff, B.slice(j, M).map(function (atom) { 64 | return { operation: "add", atom: atom }; 65 | })); 66 | 67 | [].push.apply(diff, A.slice(N, N + K).map(function (atom) { 68 | return { operation: "none", atom: atom }; })); 69 | 70 | return diff; 71 | }; 72 | 73 | // Accepts custom comparator 74 | var customIndexOf = function(item, start, equals){ 75 | var arr = this; 76 | for (var i = start; i < arr.length; i++) 77 | if (equals(item, arr[i])) 78 | return i; 79 | return -1; 80 | }; 81 | 82 | // Exports 83 | if (typeof module !== "undefined") 84 | module.exports = diff; 85 | 86 | -------------------------------------------------------------------------------- /app/css/mixins.styl: -------------------------------------------------------------------------------- 1 | // FONT 2 | @import url("//fonts.googleapis.com/css?family=Averia+Sans+Libre:400,700,400italic,700italic|Ubuntu+Mono:400,700|Kreon:400,700"); 3 | 4 | sansSerif() 5 | font-family: Helvetica, Arial, freesans, clean, sans-serif 6 | 7 | logoFont() 8 | font-family: 'Averia Sans Libre', Arial, freesans, clean, sans-serif 9 | 10 | serif() 11 | font-family: 'Kreon', 'Times New Roman', Times, serif 12 | 13 | monospace() 14 | font-family: 'Ubuntu Mono', 'Courier New', monospace 15 | 16 | 17 | // CUBE 18 | cube(size=100px, color=#c4dafb) 19 | width: 100% 20 | height: 100% 21 | position: absolute 22 | display: block 23 | padding: 0 24 | margin: -(size/2) 0 0 -(size/2) 25 | top: 50% 26 | left: 50% 27 | transform-origin: (size/2) (size/2) 28 | //transform-origin: 50% 50% 29 | li 30 | display: block 31 | position: absolute 32 | width: size 33 | height: size 34 | transition: transform 1s ease-in-out 35 | .front, .back, .right, .left, .top 36 | background: radial-gradient(transparent 30%, rgba(darken(color, 70%), 0.2) 100%) 37 | li:after 38 | content: "" 39 | display: block 40 | position: absolute 41 | width: size 42 | height: size 43 | backface-visibility:hidden 44 | background-color: color 45 | transition: transform 1s ease-in-out 46 | .front 47 | transform: translateZ(size/2) 48 | .back 49 | transform: rotateX(-180deg) translateZ(size/2) 50 | .right 51 | transform: rotateY(90deg) translateZ(size/2) 52 | .left 53 | transform: rotateY(-90deg) translateZ(size/2) 54 | .top 55 | transform: rotateX(90deg) translateZ(size/2) 56 | .top:after 57 | background-color: lighten(color, 20%) 58 | .bottom 59 | transform: rotateX(-90deg) translateZ(size/2) 60 | .floor:after 61 | display: none 62 | .floor 63 | box-shadow: -300px 0px 50px rgba(0, 0, 0, 0.3); 64 | backface-visibility:visible 65 | width: size + 10px 66 | height: size + 10px 67 | left: 295px 68 | background-color: rgba(0, 0, 0, 0) 69 | transform: rotateX(-90deg) translateZ(size / 2 + 10) 70 | 71 | cubeRotateX = -33.5deg 72 | cubeRotateY = 45deg 73 | 74 | // SPIN 75 | @keyframes slowspin 76 | 0% 77 | transform: rotateX(cubeRotateX) rotateY(cubeRotateY + 0deg) 78 | 10% 79 | transform: rotateX(cubeRotateX) rotateY(cubeRotateY + 180deg) 80 | 100% 81 | transform: rotateX(cubeRotateX) rotateY(cubeRotateY + 180deg) 82 | 83 | @keyframes fastspin 84 | 0% 85 | transform: rotateX(cubeRotateX) rotateY(cubeRotateY - 0deg) 86 | 10% 87 | transform: rotateX(cubeRotateX) rotateY(cubeRotateY - 360deg) 88 | 100% 89 | transform: rotateX(cubeRotateX) rotateY(cubeRotateY - 360deg) 90 | 91 | spin(name=slowspin, speed=10s) 92 | transform: rotateX(cubeRotateX) rotateY(cubeRotateY + 0deg) 93 | transform-style: preserve-3d 94 | animation: name speed ease-in-out infinite 2s 95 | -------------------------------------------------------------------------------- /layouts/doc.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | {{title}} 13 | 14 | 15 | 16 | 17 |
18 |
19 | 29 | 30 |
31 | 37 | 38 |
39 | Edit 40 |
41 |
42 | 45 |
46 | 47 | {{include deprecation}} 48 | 49 |
50 |
51 | {{wiki}} 52 |
53 |
54 | 55 |
56 |
57 |
58 | Edit this page 59 |
60 |
61 |
62 | 63 |
64 |
65 |
66 |
67 |
68 |
69 | 70 |
71 |
72 | Fork me on GitHub 73 | 74 | 75 | -------------------------------------------------------------------------------- /lib/highlight.js/xml.js: -------------------------------------------------------------------------------- 1 | module.exports = function(hljs) { 2 | var XML_IDENT_RE = '[A-Za-z0-9\\._:-]+'; 3 | var TAG_INTERNALS = { 4 | endsWithParent: true, 5 | relevance: 0, 6 | contains: [ 7 | { 8 | className: 'attribute', 9 | begin: XML_IDENT_RE, 10 | relevance: 0 11 | }, 12 | { 13 | begin: '="', returnBegin: true, end: '"', 14 | contains: [{ 15 | className: 'value', 16 | begin: '"', endsWithParent: true 17 | }] 18 | }, 19 | { 20 | begin: '=\'', returnBegin: true, end: '\'', 21 | contains: [{ 22 | className: 'value', 23 | begin: '\'', endsWithParent: true 24 | }] 25 | }, 26 | { 27 | begin: '=', 28 | contains: [{ 29 | className: 'value', 30 | begin: '[^\\s/>]+' 31 | }] 32 | } 33 | ] 34 | }; 35 | return { 36 | case_insensitive: true, 37 | contains: [ 38 | { 39 | className: 'pi', 40 | begin: '<\\?', end: '\\?>', 41 | relevance: 10 42 | }, 43 | { 44 | className: 'doctype', 45 | begin: '', 46 | relevance: 10, 47 | contains: [{begin: '\\[', end: '\\]'}] 48 | }, 49 | { 50 | className: 'comment', 51 | begin: '', 52 | relevance: 10 53 | }, 54 | { 55 | className: 'cdata', 56 | begin: '<\\!\\[CDATA\\[', end: '\\]\\]>', 57 | relevance: 10 58 | }, 59 | { 60 | className: 'tag', 61 | /* 62 | The lookahead pattern (?=...) ensures that 'begin' only matches 63 | '|$)', end: '>', 68 | keywords: {title: 'style'}, 69 | contains: [TAG_INTERNALS], 70 | starts: { 71 | end: '', returnEnd: true, 72 | subLanguage: 'css' 73 | } 74 | }, 75 | { 76 | className: 'tag', 77 | // See the comment in the