1. Project Overview & Quickstart (webpack/mini-css-extract-plugin)
mini-css-extract-plugin
Lightweight CSS extraction plugin
Repository Details
- Repository: webpack/mini-css-extract-plugin
- GitHub Stars: ⭐ 4,662
- Primary Language: JavaScript
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. 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 if you have not already
git clone git://github.com/webpack/docs && cd docsnpm installnpm start- Visit 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:
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
npm install less-loader css-loader style-loaderThese 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.
webpackSummary
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
npm install coffee-loaderCreate The Bundle
webpack app.coffee bundle.js --module-bind coffeeThis 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.jsUse 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.