## 1. Project Overview & Quickstart (webpack/LICENSE) # LICENSE Open-source repository webpack/LICENSE ### Repository Details - **Repository:** [webpack/LICENSE](https://github.com/webpack/LICENSE) - **Primary Language:** Code *Note: High-volume repository documentation is actively indexed and synchronized by YakaAI.* ## 2. Official Technical Reference & Guides (webpack/docs) ## File: README.md # [documentation](https://webpack.github.io/docs/) # NEW DOCS HAVE BEEN MOVED TO [webpack/webpack.js.org](https://github.com/webpack/webpack.js.org) # ATTENTION: If you are planning on updating the content here you must update the [WIKI](https://github.com/webpack/docs/wiki). # 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. The documentation is generated from the contents of this [wiki](https://github.com/webpack/docs/wiki). Please make any content edits there. ## building the documentation If you would like to edit the layout, styling or scripts of the documentation, please follow these steps: * Install [Node.js](https://nodejs.org/) if you have not already * `git clone git://github.com/webpack/docs && cd docs` * `npm install` * `npm start` * Visit [http://localhost:8088](http://localhost:8088) to preview your changes before making a pull request. --- ## File: tutorials/migrate-to-webpack/1.8 templates/README.md Our html still contains another static resource: `style.less.css` (compiled from `style.less`). ... but there is still a static resource hidden. The html code. You guess it, we can bundle it too. Because I like `jade` templates: ``` sh npm install jade-loader ``` $$$ files ## Summary So finally we really moved **all** static resources into the bundle! > Note: This is again of course not suitable for a progressively enhanced application. $$$ index.html --- ## File: tutorials/migrate-to-webpack/1.7 other-resources/README.md Our html still contains another static resource: `style.less.css` (compiled from `style.less`). We want it bundled too! With webpack that's easy: ## stylesheets We need more loaders: * One to transform less to css: `less-loader` * One to transform css to javascript: `css-loader` * One to add css to the DOM: `style-loader` ``` sh npm install less-loader css-loader style-loader ``` These loaders need to be applied for less files. We can configure this in the configuration and just `require` the stylesheet. $$$ files Because webpack can handle `less` the extra step of compiling the `less` file can be omitted. Note: You can remove the generated file `styles.less.css`. ## Summary We moved all referenced static resources into the bundle... > 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. $$$ index.html --- ## File: tutorials/migrate-to-webpack/1.6 external-depencencies/README.md We use jQuery in the app. But wait jQuery is javascript. Should it not be a dependency which can be required? Yes. Let's create a `jquery` web module so it can be required: ## jquery web module * Create a folder `web_modules`. * Put the jquery library into this folder as `jquery.js` $$$ files Not relative require calls are looked up in modules folders. For web modules we can use a folder `"web_modules"`. ## Summary All javascript stuff is now bundled. $$$ index.html --- ## File: tutorials/migrate-to-webpack/1.5 modules/README.md ## Let's make modules Because we use webpack now, we can use `require` to load other modules. We first want to split our code into model, view and controller. We use CommonJS style modules in this example, but AMD style modules are also possible (or mix both styles). $$$ files ### Summary Webpack now takes care of our coffeescript files and bundle them together. $$$ index.html --- ## File: tutorials/migrate-to-webpack/1.4 webpack-config/README.md # Use a configuration file We want to put our configuration into a file to we don't have to type all the command line arguments to compile. webpack use `webpack.config.js` as configuration if found in the current directory $$$ files ### Create The Bundle Now we just have to call webpack without arguments. ``` sh webpack ``` ## Summary Our configuration is now in a file. $$$ index.html --- ## File: tutorials/migrate-to-webpack/1.3 coffee-script/README.md # Preprocess coffeescript We want webpack to compile coffeescript to javascript while compiling. ## Install the coffeescript loader ``` sh npm install coffee-loader ``` ## Create The Bundle ``` sh webpack app.coffee bundle.js --module-bind coffee ``` This binds the extension `.coffee` to the loader `coffee-loader`. Note: The generated file `app.coffee.js` can be deleted. ## Summary webpack now compiles coffeescript to javascript for us. $$$ index.html --- ## File: tutorials/migrate-to-webpack/1.2 lets-webpack/README.md # Let's webpack In the first step we want to use webpack for bundling the single file. We care for handling coffeescript in the next step. For now we just bundle the generated js file. It's assumed you have webpack installed. See others guides for instructions. ## Create The Bundle ``` webpack app.coffee.js bundle.js ``` ## Use The Bundle We can remove the `app.coffee.js` file from the html and use the bundled version instead: $$$ files ## Summary The single file `app.coffee.js` now goes though webpack. $$$ index.html --- ## File: tutorials/migrate-to-webpack/1.1 normal-app/README.md # A "normal" app Let's begin with a simple web app and let's try to make use of webpack step by step. $$$ files ## Publishing 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. $$$ index.html ## Summary That's a really simple app. --- ## File: tutorials/migrate-to-webpack/1.0 welcome/README.md # Welcome In this small tutorial we will migrate a very simple web app to a webpack-built app. You'll learn: * How to Click on the next button to continue with the next step.