diff --git a/.alexrc b/.alexrc index b8f06d37fd66..22e6d90c3208 100644 --- a/.alexrc +++ b/.alexrc @@ -2,21 +2,28 @@ "allow": [ "bigger", "color", - "lies", + "colors", + "crash", + "dead", + "dive", "execute", "executed", "execution", - "host-hostess", + "dirty", "disabled", - "crash", + "failed", "failure", - "period", + "fire", "hook", - "dirty", "host-hostess", - "fire", - "remains", + "hosts", "jade", - "failed" + "laid", + "lies", + "period", + "pros", + "reject", + "remains", + "white" ] -} \ No newline at end of file +} diff --git a/.github/CODE_OF_CONDUCT.md b/.github/CODE_OF_CONDUCT.md new file mode 100644 index 000000000000..defdd0ceb34c --- /dev/null +++ b/.github/CODE_OF_CONDUCT.md @@ -0,0 +1,10 @@ +Code of Conduct +--------------- + +At webpack and all webpack/webpack-contrib repositories we follow the +[JSFoundation Code of Conduct][1]. Please adhere to the guidelines there and +feel free to report any violation of them to the @webpack/core-team, +@webpack/documentation-team, or . + + +[1]: https://js.foundation/community/code-of-conduct diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 9dc2ce16e8d9..3166e3be370b 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -1,51 +1,94 @@ -# Contributing +Contributing +------------ + +From adding an issue for a documentation suggestion to creating a pull request: every +contribution is appreciated and welcome. If you're planning to implement a new section or +page please create an issue first. -From adding an issue for a documentation suggestion to creating a pull request: every contribution is appreciated and welcome. If you're planning to implement a new section or page please create an issue first. ## Setup -* Install [Node.js](https://nodejs.org/) if you have not already. - *Note: Node 6.9.* is required for "best results".*. Node 7 may have issues! -* Fork the **webpack.js.org** repo at [https://github.com/webpack/webpack.js.org](https://github.com/webpack/webpack.js.org). -* `git clone && cd webpack.js.org` -* `npm install` -* `npm run build` -* `npm start` -* Visit [http://localhost:3000](http://localhost:3000) to preview your changes before making a pull request. +Start by ensuring you have Node installed and forking the repository: + +- Install [Node.js][1] if you have not already. +- Fork the **webpack.js.org** repo from [the main repository][2]. +- `git clone && cd webpack.js.org` + +Once you are in the project directory, run the following commands: + +- `npm install` to pull all dependencies. +- `npm run build` to create a production version of the site. +- `npm start` to develop on a local webpack-dev-server: [localhost:3000][3]. +- `npm run fetch` to retrieve external documentation/data. + +The final command, `npm run fetch`, is optional as both `npm run build` and `npm start` +will do this automatically. This step pulls in documentation for loaders/plugins hosted +in separate repositories such as the ones found in the [webpack-contrib][4] organization. +See the `package.json` for the full list of `scripts`. + +> Note that __Node 6.9.x__ or above is required for the build process to run properly. + +> Note that a __Python version between v2.5.0 and 3.0.0__ is required for the [proselint][12] dependency. + ## Contributor License Agreement -When submitting your contribution, a CLA (Contributor License Agreement) bot will come by to verify that you signed the CLA. If it is your first time, it will link you to the right place to sign it. However, if you have committed your contributions using an email that is not the same as your email used on GitHub, the CLA bot can't accept your contribution. +When submitting your contribution, a CLA (Contributor License Agreement) bot will come by +to verify that you signed the CLA. If it is your first time, it will link you to the right +place to sign it. However, if you have committed your contributions using an email that is +not the same as your email used on GitHub, the CLA bot can't accept your contribution. + +Run `git config user.email` to see your Git email, and verify it with your [GitHub email][5]. -Run `git config user.email` to see your Git email, and verify it with [your GitHub email](https://github.com/settings/emails). ## Editor Config -The [.editorconfig](https://github.com/webpack/webpack.js.org/blob/master/.editorconfig) in the root should ensure consistent formatting. Please make sure you've [installed the plugin](http://editorconfig.org/#download) if your text editor needs one. +The [.editorconfig][6] in the root should ensure consistent formatting. Please make sure +you've [installed the plugin][7] if your text editor needs one. + ## Branching Your Changes Making a branch in your fork for your contribution is helpful in the following ways: -* It allows you to have multiple contributions in as PRs at once. -* It allows us to identify what your contribution is about from the branch name. +- It allows you to have multiple contributions in as PRs at once. +- It allows us to identify what your contribution is about from the branch name. + + +## Committing Your Changes + +Please follow the [conventionalcommits][10] specification. For example, for documentation +changes, a short commit message may resemble the following: + +``` md +docs(config): clarify `output.filename` usage +``` + +Note that you can add a body/footer if more details are necessary. Soon we will +start utilizing [`standard-version`][11] for releases/changelog generation. This +will also potentially tie in to having archived docs for each major version. + ## Submitting Changes -After getting some feedback, push to your fork branch and submit a pull request. We may suggest some changes or improvements or alternatives, but for small changes your pull request should be accepted quickly. +After getting some feedback, push to your fork branch and submit a pull request. We may +suggest some changes or improvements or alternatives, but for small changes your pull +request should be accepted and merged fairly quick. + +Issue the PR to the [master][8] branch. -Issue the PR to the [master](https://github.com/webpack/webpack.js.org/tree/master) branch. +> See [GitHub documentation][9] for more help. -> See [GitHub documentation](https://help.github.com/articles/proposing-changes-to-your-work-with-pull-requests/) for more help. -## Contribution Recognition +## Recognition -You can choose to add your GitHub username for recognition at the top of any markdown document you edit: +You can choose to add your GitHub username for recognition at the top of any markdown +document you edit: -**example.md** +__example.md__ ```markdown -=== +--- title: Some Example Page contributors: - TheLarkInn @@ -53,15 +96,30 @@ contributors: - bebraw - Jhnns - SpaceK33z -=== - -## Some Documentation +--- +Some documentation... ``` -This will add your name and GitHub profile photo to the document in production. It's a great way to own the awesome work that you do and we encourage you to do this in your PRs. +This will add your name and GitHub profile photo to the document in production. It's a +great way to own the awesome work that you do and we encourage you to do this in your PRs. + + +## Thank You +webpack is a feature rich, low level tool and documentation is a huge time sink. We appreciate +any time spent fixing typos or clarifying sections in the documentation. -## Thank you -webpack is insanely feature rich and documentation is a huge time sink. We greatly appreciate any time spent fixing typos or clarifying sections in the documentation. +[1]: https://nodejs.org/ +[2]: https://github.com/webpack/webpack.js.org +[3]: http://localhost:3000/ +[4]: https://github.com/webpack-contrib +[5]: https://github.com/settings/emails +[6]: https://github.com/webpack/webpack.js.org/blob/master/.editorconfig +[7]: http://editorconfig.org/#download +[8]: https://github.com/webpack/webpack.js.org/tree/master +[9]: https://help.github.com/articles/proposing-changes-to-your-work-with-pull-requests/ +[10]: http://conventionalcommits.org/ +[11]: https://github.com/conventional-changelog/standard-version +[12]: https://github.com/amperser/proselint diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index 2dc83d2122b7..fa6f49039a4a 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -1,2 +1,4 @@ -1. Check the existing issues to see if you can find something matching to your request. -2. If you didn't find a relevant issue, go ahead and open a new one. It's better to make small typo fixes and such directly as pull requests. +- [ ] Check the current issues to ensure you aren't creating a duplicate. +- [ ] Consider making small typo fixes and such directly as pull requests. +- [ ] No existing issue? Go ahead and open a new one. +- __Remove these instructions from your PR as they are for your eyes only.__ diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index b8e9b90dd0ec..199e9e7094fb 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,4 +1,10 @@ -1. [Read and sign the CLA](https://cla.js.foundation/webpack/webpack.js.org). This needs to be done only once. PRs that haven't signed it won't be accepted. -2. Make sure your PR complies with [the writer's guide](https://webpack.js.org/writers-guide/). -3. Read through the PR diff carefully as sometimes this can reveal issues. The work will be reviewed, but this can save some effort. -4. Remove these instructions from your PR as they are for your eyes only. +_describe your changes..._ + +- [ ] Read and sign the [CLA][1]. PRs that haven't signed it won't be accepted. +- [ ] Make sure your PR complies with the [writer's guide][2]. +- [ ] Review the diff carefully as sometimes this can reveal issues. +- __Remove these instructions from your PR as they are for your eyes only.__ + + +[1]: https://cla.js.foundation/webpack/webpack.js.org +[2]: https://webpack.js.org/writers-guide/ diff --git a/.gitignore b/.gitignore index ee93ba0570cc..6e0ac65609d9 100644 --- a/.gitignore +++ b/.gitignore @@ -2,7 +2,8 @@ node_modules npm-debug.log build generated -components/support/support-backers.json -components/support/support-sponsors.json -components/starter-kits/starter-kits-data.json +src/components/Support/support-backers.json* +src/components/Support/support-sponsors.json* +src/components/StarterKits/starter-kits-data.json* .antwar +yarn-error.log \ No newline at end of file diff --git a/.travis.yml b/.travis.yml index 06ad990738bf..1c8c3de13cc2 100644 --- a/.travis.yml +++ b/.travis.yml @@ -6,7 +6,7 @@ language: node_js node_js: - "6" script: - - bash ./scripts/deploy.sh + - bash ./src/scripts/deploy.sh sudo: required install: - npm install --global yarn diff --git a/LICENSE b/LICENSE new file mode 100644 index 000000000000..2f244ac81403 --- /dev/null +++ b/LICENSE @@ -0,0 +1,395 @@ +Attribution 4.0 International + +======================================================================= + +Creative Commons Corporation ("Creative Commons") is not a law firm and +does not provide legal services or legal advice. Distribution of +Creative Commons public licenses does not create a lawyer-client or +other relationship. Creative Commons makes its licenses and related +information available on an "as-is" basis. Creative Commons gives no +warranties regarding its licenses, any material licensed under their +terms and conditions, or any related information. Creative Commons +disclaims all liability for damages resulting from their use to the +fullest extent possible. + +Using Creative Commons Public Licenses + +Creative Commons public licenses provide a standard set of terms and +conditions that creators and other rights holders may use to share +original works of authorship and other material subject to copyright +and certain other rights specified in the public license below. The +following considerations are for informational purposes only, are not +exhaustive, and do not form part of our licenses. + + Considerations for licensors: Our public licenses are + intended for use by those authorized to give the public + permission to use material in ways otherwise restricted by + copyright and certain other rights. Our licenses are + irrevocable. Licensors should read and understand the terms + and conditions of the license they choose before applying it. + Licensors should also secure all rights necessary before + applying our licenses so that the public can reuse the + material as expected. Licensors should clearly mark any + material not subject to the license. This includes other CC- + licensed material, or material used under an exception or + limitation to copyright. More considerations for licensors: + wiki.creativecommons.org/Considerations_for_licensors + + Considerations for the public: By using one of our public + licenses, a licensor grants the public permission to use the + licensed material under specified terms and conditions. If + the licensor's permission is not necessary for any reason--for + example, because of any applicable exception or limitation to + copyright--then that use is not regulated by the license. Our + licenses grant only permissions under copyright and certain + other rights that a licensor has authority to grant. Use of + the licensed material may still be restricted for other + reasons, including because others have copyright or other + rights in the material. A licensor may make special requests, + such as asking that all changes be marked or described. + Although not required by our licenses, you are encouraged to + respect those requests where reasonable. More_considerations + for the public: + wiki.creativecommons.org/Considerations_for_licensees + +======================================================================= + +Creative Commons Attribution 4.0 International Public License + +By exercising the Licensed Rights (defined below), You accept and agree +to be bound by the terms and conditions of this Creative Commons +Attribution 4.0 International Public License ("Public License"). To the +extent this Public License may be interpreted as a contract, You are +granted the Licensed Rights in consideration of Your acceptance of +these terms and conditions, and the Licensor grants You such rights in +consideration of benefits the Licensor receives from making the +Licensed Material available under these terms and conditions. + + +Section 1 -- Definitions. + + a. Adapted Material means material subject to Copyright and Similar + Rights that is derived from or based upon the Licensed Material + and in which the Licensed Material is translated, altered, + arranged, transformed, or otherwise modified in a manner requiring + permission under the Copyright and Similar Rights held by the + Licensor. For purposes of this Public License, where the Licensed + Material is a musical work, performance, or sound recording, + Adapted Material is always produced where the Licensed Material is + synched in timed relation with a moving image. + + b. Adapter's License means the license You apply to Your Copyright + and Similar Rights in Your contributions to Adapted Material in + accordance with the terms and conditions of this Public License. + + c. Copyright and Similar Rights means copyright and/or similar rights + closely related to copyright including, without limitation, + performance, broadcast, sound recording, and Sui Generis Database + Rights, without regard to how the rights are labeled or + categorized. For purposes of this Public License, the rights + specified in Section 2(b)(1)-(2) are not Copyright and Similar + Rights. + + d. Effective Technological Measures means those measures that, in the + absence of proper authority, may not be circumvented under laws + fulfilling obligations under Article 11 of the WIPO Copyright + Treaty adopted on December 20, 1996, and/or similar international + agreements. + + e. Exceptions and Limitations means fair use, fair dealing, and/or + any other exception or limitation to Copyright and Similar Rights + that applies to Your use of the Licensed Material. + + f. Licensed Material means the artistic or literary work, database, + or other material to which the Licensor applied this Public + License. + + g. Licensed Rights means the rights granted to You subject to the + terms and conditions of this Public License, which are limited to + all Copyright and Similar Rights that apply to Your use of the + Licensed Material and that the Licensor has authority to license. + + h. Licensor means the individual(s) or entity(ies) granting rights + under this Public License. + + i. Share means to provide material to the public by any means or + process that requires permission under the Licensed Rights, such + as reproduction, public display, public performance, distribution, + dissemination, communication, or importation, and to make material + available to the public including in ways that members of the + public may access the material from a place and at a time + individually chosen by them. + + j. Sui Generis Database Rights means rights other than copyright + resulting from Directive 96/9/EC of the European Parliament and of + the Council of 11 March 1996 on the legal protection of databases, + as amended and/or succeeded, as well as other essentially + equivalent rights anywhere in the world. + + k. You means the individual or entity exercising the Licensed Rights + under this Public License. Your has a corresponding meaning. + + +Section 2 -- Scope. + + a. License grant. + + 1. Subject to the terms and conditions of this Public License, + the Licensor hereby grants You a worldwide, royalty-free, + non-sublicensable, non-exclusive, irrevocable license to + exercise the Licensed Rights in the Licensed Material to: + + a. reproduce and Share the Licensed Material, in whole or + in part; and + + b. produce, reproduce, and Share Adapted Material. + + 2. Exceptions and Limitations. For the avoidance of doubt, where + Exceptions and Limitations apply to Your use, this Public + License does not apply, and You do not need to comply with + its terms and conditions. + + 3. Term. The term of this Public License is specified in Section + 6(a). + + 4. Media and formats; technical modifications allowed. The + Licensor authorizes You to exercise the Licensed Rights in + all media and formats whether now known or hereafter created, + and to make technical modifications necessary to do so. The + Licensor waives and/or agrees not to assert any right or + authority to forbid You from making technical modifications + necessary to exercise the Licensed Rights, including + technical modifications necessary to circumvent Effective + Technological Measures. For purposes of this Public License, + simply making modifications authorized by this Section 2(a) + (4) never produces Adapted Material. + + 5. Downstream recipients. + + a. Offer from the Licensor -- Licensed Material. Every + recipient of the Licensed Material automatically + receives an offer from the Licensor to exercise the + Licensed Rights under the terms and conditions of this + Public License. + + b. No downstream restrictions. You may not offer or impose + any additional or different terms or conditions on, or + apply any Effective Technological Measures to, the + Licensed Material if doing so restricts exercise of the + Licensed Rights by any recipient of the Licensed + Material. + + 6. No endorsement. Nothing in this Public License constitutes or + may be construed as permission to assert or imply that You + are, or that Your use of the Licensed Material is, connected + with, or sponsored, endorsed, or granted official status by, + the Licensor or others designated to receive attribution as + provided in Section 3(a)(1)(A)(i). + + b. Other rights. + + 1. Moral rights, such as the right of integrity, are not + licensed under this Public License, nor are publicity, + privacy, and/or other similar personality rights; however, to + the extent possible, the Licensor waives and/or agrees not to + assert any such rights held by the Licensor to the limited + extent necessary to allow You to exercise the Licensed + Rights, but not otherwise. + + 2. Patent and trademark rights are not licensed under this + Public License. + + 3. To the extent possible, the Licensor waives any right to + collect royalties from You for the exercise of the Licensed + Rights, whether directly or through a collecting society + under any voluntary or waivable statutory or compulsory + licensing scheme. In all other cases the Licensor expressly + reserves any right to collect such royalties. + + +Section 3 -- License Conditions. + +Your exercise of the Licensed Rights is expressly made subject to the +following conditions. + + a. Attribution. + + 1. If You Share the Licensed Material (including in modified + form), You must: + + a. retain the following if it is supplied by the Licensor + with the Licensed Material: + + i. identification of the creator(s) of the Licensed + Material and any others designated to receive + attribution, in any reasonable manner requested by + the Licensor (including by pseudonym if + designated); + + ii. a copyright notice; + + iii. a notice that refers to this Public License; + + iv. a notice that refers to the disclaimer of + warranties; + + v. a URI or hyperlink to the Licensed Material to the + extent reasonably practicable; + + b. indicate if You modified the Licensed Material and + retain an indication of any previous modifications; and + + c. indicate the Licensed Material is licensed under this + Public License, and include the text of, or the URI or + hyperlink to, this Public License. + + 2. You may satisfy the conditions in Section 3(a)(1) in any + reasonable manner based on the medium, means, and context in + which You Share the Licensed Material. For example, it may be + reasonable to satisfy the conditions by providing a URI or + hyperlink to a resource that includes the required + information. + + 3. If requested by the Licensor, You must remove any of the + information required by Section 3(a)(1)(A) to the extent + reasonably practicable. + + 4. If You Share Adapted Material You produce, the Adapter's + License You apply must not prevent recipients of the Adapted + Material from complying with this Public License. + + +Section 4 -- Sui Generis Database Rights. + +Where the Licensed Rights include Sui Generis Database Rights that +apply to Your use of the Licensed Material: + + a. for the avoidance of doubt, Section 2(a)(1) grants You the right + to extract, reuse, reproduce, and Share all or a substantial + portion of the contents of the database; + + b. if You include all or a substantial portion of the database + contents in a database in which You have Sui Generis Database + Rights, then the database in which You have Sui Generis Database + Rights (but not its individual contents) is Adapted Material; and + + c. You must comply with the conditions in Section 3(a) if You Share + all or a substantial portion of the contents of the database. + +For the avoidance of doubt, this Section 4 supplements and does not +replace Your obligations under this Public License where the Licensed +Rights include other Copyright and Similar Rights. + + +Section 5 -- Disclaimer of Warranties and Limitation of Liability. + + a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE + EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS + AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF + ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS, + IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION, + WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR + PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS, + ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT + KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT + ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU. + + b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE + TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION, + NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT, + INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES, + COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR + USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN + ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR + DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR + IN PART, THIS LIMITATION MAY NOT APPLY TO YOU. + + c. The disclaimer of warranties and limitation of liability provided + above shall be interpreted in a manner that, to the extent + possible, most closely approximates an absolute disclaimer and + waiver of all liability. + + +Section 6 -- Term and Termination. + + a. This Public License applies for the term of the Copyright and + Similar Rights licensed here. However, if You fail to comply with + this Public License, then Your rights under this Public License + terminate automatically. + + b. Where Your right to use the Licensed Material has terminated under + Section 6(a), it reinstates: + + 1. automatically as of the date the violation is cured, provided + it is cured within 30 days of Your discovery of the + violation; or + + 2. upon express reinstatement by the Licensor. + + For the avoidance of doubt, this Section 6(b) does not affect any + right the Licensor may have to seek remedies for Your violations + of this Public License. + + c. For the avoidance of doubt, the Licensor may also offer the + Licensed Material under separate terms or conditions or stop + distributing the Licensed Material at any time; however, doing so + will not terminate this Public License. + + d. Sections 1, 5, 6, 7, and 8 survive termination of this Public + License. + + +Section 7 -- Other Terms and Conditions. + + a. The Licensor shall not be bound by any additional or different + terms or conditions communicated by You unless expressly agreed. + + b. Any arrangements, understandings, or agreements regarding the + Licensed Material not stated herein are separate from and + independent of the terms and conditions of this Public License. + + +Section 8 -- Interpretation. + + a. For the avoidance of doubt, this Public License does not, and + shall not be interpreted to, reduce, limit, restrict, or impose + conditions on any use of the Licensed Material that could lawfully + be made without permission under this Public License. + + b. To the extent possible, if any provision of this Public License is + deemed unenforceable, it shall be automatically reformed to the + minimum extent necessary to make it enforceable. If the provision + cannot be reformed, it shall be severed from this Public License + without affecting the enforceability of the remaining terms and + conditions. + + c. No term or condition of this Public License will be waived and no + failure to comply consented to unless expressly agreed to by the + Licensor. + + d. Nothing in this Public License constitutes or may be interpreted + as a limitation upon, or waiver of, any privileges and immunities + that apply to the Licensor or You, including from the legal + processes of any jurisdiction or authority. + + +======================================================================= + +Creative Commons is not a party to its public +licenses. Notwithstanding, Creative Commons may elect to apply one of +its public licenses to material it publishes and in those instances +will be considered the “Licensor.” The text of the Creative Commons +public licenses is dedicated to the public domain under the CC0 Public +Domain Dedication. Except for the limited purpose of indicating that +material is shared under a Creative Commons public license or as +otherwise permitted by the Creative Commons policies published at +creativecommons.org/policies, Creative Commons does not authorize the +use of the trademark "Creative Commons" or any other trademark or logo +of Creative Commons without its prior written consent including, +without limitation, in connection with any unauthorized modifications +to any of its public licenses or any other arrangements, +understandings, or agreements concerning use of licensed material. For +the avoidance of doubt, this paragraph does not form part of the +public licenses. + +Creative Commons may be contacted at creativecommons.org. diff --git a/README.md b/README.md index 523053d3d123..a8c696aecf1f 100644 --- a/README.md +++ b/README.md @@ -1,29 +1,47 @@ -[![build status](https://secure.travis-ci.org/webpack/webpack.js.org.svg)](http://travis-ci.org/webpack/webpack.js.org) - # webpack.js.org -Guides, documentation, and all things webpack. +[![build status](https://secure.travis-ci.org/webpack/webpack.js.org.svg)](http://travis-ci.org/webpack/webpack.js.org) +[![Standard Version](https://img.shields.io/badge/release-standard%20version-brightgreen.svg)](https://github.com/conventional-changelog/standard-version) -## Contributing +Guides, documentation, and all things webpack. -To develop, please pull the project, `cd` into the directory and run: -- `npm install` to pull all dependencies. -- `npm run build` to create a production version of the site. -- `npm start` to develop on a local webpack-dev-server (should be [here](http://localhost:3000/)). +## Content Progress -If you want to fetch the documentation on additional loaders/plugins hosted in [separate repositories](https://github.com/webpack), run `npm run fetch`. +Now that we've covered much of the backlog of _missing documentation_, we are starting +to heavily review each section of the site's content to sort and structure it appropriately. +The following issues should provide a pretty good idea of where things are, and where +they are going: -For more information see the [contributors page](https://github.com/webpack/webpack.js.org/blob/master/.github/CONTRIBUTING.md) +- [Guides - Review and Simplify][1] +- [Concepts - Review, Organize, Define Clear Goals][2] -## Content Progress +We haven't created issues for the other sections yet but they will be coming soon. For +dev-related work please see [General - Current Longterm Plan][3], which will soon be +replaced by a more dev-specific issue. -Check out the [MVP Milestone](https://github.com/webpack/webpack.js.org/milestones) for the current status. ## Translation -If you hope to localize this documentation please transit to [translate branch](https://github.com/webpack/webpack.js.org/tree/translation). +If you hope to localize this documentation please jump to the [translate branch][4]. + + +## Contributing + +Read throug the [writer's guide][7] if you're interested in editing the conent on this +site. See the [contributors page][5] to learn how to set up and start working on the site +locally. + ## License -The content is available under [Creative Commons BY 4.0](https://creativecommons.org/licenses/by/4.0/) license. +The content is available under the [Creative Commons BY 4.0][6] license. + + +[1]: https://github.com/webpack/webpack.js.org/issues/1258 +[2]: https://github.com/webpack/webpack.js.org/issues/1386 +[3]: https://github.com/webpack/webpack.js.org/issues/1380 +[4]: https://github.com/webpack/webpack.js.org/tree/translation +[5]: https://github.com/webpack/webpack.js.org/blob/master/.github/CONTRIBUTING.md +[6]: https://creativecommons.org/licenses/by/4.0/ +[7]: https://webpack.js.org/writers-guide diff --git a/antwar.config.js b/antwar.config.js index cbe60d936aac..1b8158c6734a 100644 --- a/antwar.config.js +++ b/antwar.config.js @@ -1,117 +1,173 @@ const path = require('path'); const _ = require('lodash'); -const combineContexts = require('./utilities/combine-contexts'); +const combineContexts = require('./src/utilities/combine-contexts'); module.exports = { - maximumWorkers: process.env.TRAVIS && 1, // Faster on Travis + maximumWorkers: process.env.TRAVIS && 1, template: { file: path.join(__dirname, 'template.ejs') }, output: 'build', title: 'webpack', keywords: ['webpack', 'javascript', 'web development', 'programming'], - layout: () => require('./components/site/site.jsx').default, + layout: () => require('./src/components/Site/Site.jsx').default, paths: { '/': { - content: () => ( - require.context( - './loaders/page-loader!./content', - true, - /^\.\/.*\.md$/ - ) - ), + title: "Home", + content: () => require.context('./src/loaders/page-loader!./src/content', false, /^\.\/.*\.md$/), index: () => { - const index = require('./components/splash/splash.jsx').default; - + const index = require('./src/components/Splash/Splash.jsx').default; index.title = 'webpack'; index.description = 'webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.'; return index; }, - layout: () => require('./components/page/page.jsx').default, - paths: { - 'get-started': { - redirects: { - '': '/guides/getting-started', - 'install-webpack': '/guides/installation', - 'why-webpack': '/guides/why-webpack', - } - }, - guides: { - redirects: { - 'code-splitting-import': '/guides/code-splitting-async', - 'code-splitting-require': '/guides/code-splitting-async/#require-ensure-', - 'why-webpack': '/guides/comparison', - 'production-build': '/guides/production' - } - }, - configuration: { - redirects: { - 'external-configs': 'javascript-alternatives' - } - }, - api: { - redirects: { - 'passing-a-config': 'configuration-types' - } - }, - pluginsapi: { - redirects: { - '': '/api/plugins', - 'compiler': '/api/plugins/compiler', - 'template': '/api/plugins/template' - } - }, - loaders: { - content: () => { - const content = require.context( - './loaders/page-loader!./content/loaders', - false, - /^\.\/.*\.md$/ - ); - const generated = require.context( - './loaders/page-loader!./generated/loaders', - false, - /^\.\/.*\.md$/ - ); - - return combineContexts(content, generated); - } - }, - loaders: { - content: () => { - const content = require.context( - './loaders/page-loader!./content/plugins', - false, - /^\.\/.*\.md$/ - ); - const generated = require.context( - './loaders/page-loader!./generated/plugins', - false, - /^\.\/.*\.md$/ - ); + layout: () => require('./src/components/Page/Page.jsx').default, + }, + 'get-started': { + title: 'Get Gtarted', + redirects: { + '': '/guides/getting-started', + 'install-webpack': '/guides/installation', + 'why-webpack': '/guides/why-webpack', + } + }, + api: { + title: "API", + content: () => require.context('./src/loaders/page-loader!./src/content/api', false, /^\.\/.*\.md$/), + redirects: { + 'passing-a-config': 'configuration-types' + }, + url: ({ sectionName, fileName }) => `/${sectionName}/${fileName}/`, + transform: (pages) => { + return _.sortBy(pages, (page) => page.file.sort) + }, + layout: () => require('./src/components/Page/Page.jsx').default + }, + pluginsapi: { + title: 'API Plugin', + redirects: { + '': '/api/plugins', + 'compiler': '/api/plugins/compiler', + 'template': '/api/plugins/template' + }, + hideInSidebar: true + }, + concepts: { + title: "Comcepts", + content: () => require.context('./src/loaders/page-loader!./src/content/concepts', false, /^\.\/.*\.md$/), + url: ({ sectionName, fileName }) => `/${sectionName}/${fileName}/`, + transform: (pages) => { + return _.sortBy(pages, (page) => page.file.sort) + }, + layout: () => require('./src/components/Page/Page.jsx').default + }, + development: { + title: "Development", + content: () => require.context('./src/loaders/page-loader!./src/content/development', false, /^\.\/.*\.md$/), + url: ({ sectionName, fileName }) => `/${sectionName}/${fileName}/`, + transform: (pages) => { + return _.sortBy(pages, (page) => page.file.sort) + }, + layout: () => require('./src/components/Page/Page.jsx').default + }, + plugins: { + title: "Plugin", + content: () => require.context('./src/loaders/page-loader!./src/content/plugins', false, /^\.\/.*\.md$/), + url: ({ sectionName, fileName }) => `/${sectionName}/${fileName}/`, + transform: (pages) => { + return _.sortBy(pages, (page) => page.file.sort) + }, + layout: () => require('./src/components/Page/Page.jsx').default + }, + loaders: { + title: "Loaders", + content: () => { + const content = require.context( + './src/loaders/page-loader!./src/content/loaders', + false, + /^\.\/.*\.md$/ + ); + const generated = require.context( + './src/loaders/page-loader!./generated/loaders', + false, + /^\.\/.*\.md$/ + ); - return combineContexts(content, generated); - } - } - } + return combineContexts(content, generated); + }, + url: ({ sectionName, fileName }) => `/${sectionName}/${fileName}/`, + layout: () => require('./src/components/Page/Page.jsx').default }, + guides: { + title: "Guides", + content: () => require.context('./src/loaders/page-loader!./src/content/guides', false, /^\.\/.*\.md$/), + redirects: { + 'code-splitting-import': '/guides/code-splitting', + 'code-splitting-require': '/guides/code-splitting', + 'code-splitting-async': '/guides/code-splitting', + 'code-splitting-css': '/guides/code-splitting', + 'code-splitting-libraries': '/guides/code-splitting', + 'why-webpack': '/guides/comparison', + 'production-build': '/guides/production' + }, + transform: (pages) => { + return _.sortBy(pages, (page) => page.file.sort) + }, + url: ({ sectionName, fileName }) => `/${sectionName}/${fileName}/`, + layout: () => require('./src/components/Page/Page.jsx').default + }, + configuration: { + title: "Configuration", + content: () => require.context('./src/loaders/page-loader!./src/content/configuration', false, /^\.\/.*\.md$/), + transform: (pages) => { + return _.sortBy(pages, (page) => page.file.sort) + }, + transform: (pages) => { + return _.sortBy(pages, (page) => page.file.sort) + }, + url: ({ sectionName, fileName }) => `/${sectionName}/${fileName}/`, + layout: () => require('./src/components/Page/Page.jsx').default + }, + support: { + title: "Support", + content: () => require.context('./src/loaders/page-loader!./src/content/support', false, /^\.\/.*\.md$/), + transform: (pages) => { + return _.sortBy(pages, (page) => page.file.sort) + }, + transform: (pages) => { + return _.sortBy(pages, (page) => page.file.sort) + }, + url: ({ sectionName, fileName }) => `/${sectionName}/${fileName}/`, + layout: () => require('./src/components/Page/Page.jsx').default + }, vote: () => { - const page = require('./components/vote/list.jsx').default; + const page = require('./src/components/Vote/List.jsx').default; + page.title = 'Vote'; + return page; + }, + 'vote/feedback': () => { + const page = require('./src/components/Vote/List.jsx').default; page.title = 'Vote'; return page; - }, + }, + 'vote/moneyDistribution': () => { + const page = require('./src/components/Vote/List.jsx').default; + page.title = 'Vote'; + + return page; + }, organization: () => { - const page = require('./components/organization/organization.jsx').default; + const page = require('./src/components/Organization/Organization.jsx').default; page.title = 'Organization'; return page; }, 'guides/starter-kits': () => { - const page = require('./components/starter-kits/starter-kits.jsx').default; + const page = require('./src/components/StarterKits/StarterKits.jsx').default; page.title = 'Starter kits'; diff --git a/components/dropdown/dropdown.jsx b/components/dropdown/dropdown.jsx deleted file mode 100644 index 952e594ea206..000000000000 --- a/components/dropdown/dropdown.jsx +++ /dev/null @@ -1,54 +0,0 @@ -import React from 'react'; -import LanguageIcon from '../../assets/language-icon.svg'; - -export default class Dropdown extends React.Component { - state = { - active: false - }; - - render() { - let { className = '', items = [] } = this.props; - let activeMod = this.state.active ? "dropdown__list--active" : ""; - - return ( -
- - {/* Commented out until media breakpoints are in place - { items[0].title } */} - - -
- -
-
- ); - } - - /** - * Toggle visibility of dropdown items - * - * @param {bool} state - Whether to display or hide the items - */ - _toggle(state = false) { - this.setState({ - active: state - }); - } -} diff --git a/components/site/site.jsx b/components/site/site.jsx deleted file mode 100644 index 0d511e175910..000000000000 --- a/components/site/site.jsx +++ /dev/null @@ -1,71 +0,0 @@ -import React from 'react'; -import Interactive from 'antwar-interactive'; -import { GoogleAnalytics } from 'antwar-helpers'; -import NotificationBar from '../notification-bar/notification-bar'; -import Navigation from '../navigation/navigation'; -import Footer from '../footer/footer'; -import SidebarMobile from '../sidebar-mobile/sidebar-mobile'; -import './site-style'; - -// Load base styling -import '../../styles'; -import '../../styles/icon.font.js'; -import '../container/container-style.scss'; -import '../notification-bar/notification-bar-style'; -import '../navigation/navigation-style'; -import '../navigation/search-style'; -import '../sidebar-mobile/sidebar-mobile-style'; -import '../sidebar-item/sidebar-item-style'; -import '../logo/logo-style'; -import '../dropdown/dropdown-style.scss'; - -const Site = ({ - children, - section, - location: { pathname } -}) => { - // Retrieve section data - let sections = section.all() - .map(({ title, url, pages }) => ({ - title, - url, - pages: pages.map(({ title, url }) => ({ - title: title || url, // XXX: Title shouldn't be coming in as undefined - url - })) - })); - - // XXX: Is this needed anymore? - // Rename the root section ("webpack" => "Other") and push it to the end - let rootIndex = sections.findIndex(section => section.title === 'webpack'); - let rootSection = sections.splice(rootIndex, 1)[0]; - rootSection.title = 'Other'; - sections.push(rootSection); - - return ( -
- - - - - - - { children } - -
- - -
- ); -}; - -export default Site; diff --git a/components/splash/splash.jsx b/components/splash/splash.jsx deleted file mode 100644 index e9999107281d..000000000000 --- a/components/splash/splash.jsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import Interactive from 'antwar-interactive'; -import Container from '../container/container'; -import SplashViz from '../splash-viz/splash-viz'; -import Support from '../support/support'; -import './splash-style'; -import '../splash-viz/splash-viz-style'; -import '../cube/cube-style'; -import '../text-rotater/text-rotater-style.scss'; - -const Splash = () => ( -
- - -
- -
- -
- -
- -

Support the Team

- -

Through contributions, donations, and sponsorship, you allow webpack to thrive. Your donations directly support office hours, continued enhancements, and most importantly, great documentation and learning material!

- -

Sponsors

- - -

Backers

- -
-
-
-); - -export default Splash; diff --git a/components/support/support.jsx b/components/support/support.jsx deleted file mode 100644 index ef2d0afaad58..000000000000 --- a/components/support/support.jsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; -import Additional from './support-additional.json'; -import './support-style'; - -export default class Support extends React.Component { - render() { - let { number, type } = this.props; - let supporters = require(`./support-${type}.json`); - - if (type === 'sponsors') { - supporters.push(...Additional); - supporters.sort((a, b) => b.totalDonations - a.totalDonations); - } - - return ( - - ); - } -} diff --git a/content/api/plugins/compiler.md b/content/api/plugins/compiler.md deleted file mode 100644 index 34fe470cf6a3..000000000000 --- a/content/api/plugins/compiler.md +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Compiler -sort: 2 -contributors: - - rishantagarwal ---- - -The `Compiler` module of webpack is the main engine that creates a compilation instance with all the options passed through webpack CLI or `webpack` api or webpack configuration file. - -It is exported by `webpack` api under `webpack.Compiler`. - -The compiler is used by webpack by instantiating it and then calling the `run` method. Below is a trivial example of how one might use the `Compiler`. In fact, this is really close to how webpack itself uses it. - -[__compiler-example__](https://github.com/pksjce/webpack-internal-examples/tree/master/compiler-example) - -```javascript -// Can be imported from webpack package -import {Compiler} from 'webpack'; - -// Create a new compiler instance -const compiler = new Compiler(); - -// Populate all required options -compiler.options = {...}; - -// Creating a plugin. -class LogPlugin { - apply (compiler) { - compiler.plugin('should-emit', compilation => { - console.log('should i emit?'); - return true; - }) - } -} - -// Apply the compiler to the plugin -new LogPlugin().apply(compiler); - -/* Add other supporting plugins */ - -// Callback to be executed after run is complete -const callback = (err, stats) => { - console.log('Compiler has finished execution.'); - /* Do something to show the stats */ -}; - -// call run on the compiler along with the callback -compiler.run(callback); -``` - -The `Compiler` is what we call a `Tapable` instance. By this, we mean that it mixes in `Tapable` class to imbibe functionality to register and call plugins on itself. -Most user facing plugins are first registered on the `Compiler`. -The working of a Compiler can be condensed into the following highlights - - Usually there is one master instance of Compiler. Child compilers can be created for delegating specific tasks. - - A lot of the complexity in creating a compiler goes into populating all the relevant options for it. - - `webpack` has [`WebpackOptionsDefaulter`](https://github.com/webpack/webpack/blob/master/lib/WebpackOptionsDefaulter.js) and [`WebpackOptionsApply`](https://github.com/webpack/webpack/blob/master/lib/WebpackOptionsApply.js) specifically designed to provide the `Compiler` with all the initial data it requires. - - The `Compiler` is ultimately just a function which performs bare minimum functionality to keep a lifecycle running. It delegates all the loading/bundling/writing work to various plugins. - - `new LogPlugin(args).apply(compiler)` registers the plugin to any particular hook event in the `Compiler`'s lifecycle. - - The `Compiler` exposes a `run` method which kickstarts all compilation work for `webpack`. When that is done, it should call the passed in `callback` function. All the tail end work of logging stats and errors are done in this callback function. - - -## Watching - -However, the `Compiler` supports two flavors of execution. One on watch mode and one on a normal single run. -While it essentially performs the same functionality while watching, there are some additions to the lifecycle events. This allows `webpack` to have Watch specific plugins. - - -## MultiCompiler - -This module, MultiCompiler, allows webpack to run multiple configurations in separate compiler. -If the `options` parameter in the webpack's NodeJS api is an array of options, webpack applies separate compilers and calls the `callback` method at the end of each compiler execution. - -```javascript -var webpack = require('webpack'); - -var config1 = { - entry: './index1.js', - output: {filename: 'bundle1.js'} -} -var config2 = { - entry: './index2.js', - output: {filename:'bundle2.js'} -} - -webpack([config1, config2], (err, stats) => { - process.stdout.write(stats.toString() + "\n"); -}) -``` - - -## Event Hooks - -This a reference guide to all the event hooks exposed by the `Compiler`. - -| Event name | Reason | Params | Type | -|----------------------------|-------------------------------------|----------------------|------------| -| __`entry-option`__ | - | - | bailResult | -| __`after-plugins`__ | After setting up initial set of plugins | `compiler` | sync | -| __`after-resolvers`__ | After setting up the resolvers | `compiler` | sync | -| __`environment`__ | - | - | sync | -| __`after-environment`__ | Environment setup complete | - | sync | -| __`before-run`__ | `compiler.run()` starts | `compiler` | async | -| __`run`__ | Before reading records | `compiler` | async | -| __`watch-run`__ | Before starting compilation after watch | `compiler` | async | -| __`normal-module-factory`__ | After creating a `NormalModuleFactory` | `normalModuleFactory`| sync | -| __`context-module-factory`__ | After creating a `ContextModuleFactory` | `contextModuleFactory`| sync | -| __`before-compile`__ | Compilation parameters created | `compilationParams` | async | -| __`compile`__ | Before creating new compilation | `compilationParams` | sync | -| __`this-compilation`__ | Before emitting `compilation` event | `compilation` | sync | -| __`compilation`__ | Compilation creation completed | `compilation` | sync | -| __`make`__ | | `compilation` | parallel | -| __`after-compile`__ | | `compilation` | async | -| __`should-emit`__ | Can return true/false at this point | `compilation` | bailResult | -| __`need-additional-pass`__ | | - | bailResult | -| __`emit`__ | Before writing emitted assets to output dir | `compilation` | async | -| __`after-emit`__ | After writing emitted assets to output dir | `compilation` | async | -| __`done`__ | Completion of compile | `stats` | sync | -| __`failed`__ | Failure of compile | `error` | sync | -| __`invalid`__ | After invalidating a watch compile | `fileName`, `changeTime` | sync | - - -## Examples - -Here's an example of an asynchronous `emit` event handler: - -```javascript -compiler.plugin("emit", function(compilation, callback) { - // Do something async... - setTimeout(function() { - console.log("Done with async work..."); - callback(); - }, 1000); -}); -``` diff --git a/content/configuration/devtool.md b/content/configuration/devtool.md deleted file mode 100644 index 4189a470f57a..000000000000 --- a/content/configuration/devtool.md +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Devtool -sort: 10 -contributors: - - sokra - - skipjack - - SpaceK33z - - lricoy -related: - - title: Enabling Sourcemaps - url: http://survivejs.com/webpack/developing-with-webpack/enabling-sourcemaps/ - - title: Webpack's Devtool Source Map - url: http://cheng.logdown.com/posts/2016/03/25/679045 ---- - -This option controls if and how source maps are generated. - -Use the [`SourceMapDevToolPlugin`](/plugins/source-map-dev-tool-plugin) for a more fine grained configuration. See the [`source-map-loader`](/loaders/source-map-loader) to deal with existing source maps. - - -## `devtool` - -`string` `false` - -Choose a style of [source mapping](http://blog.teamtreehouse.com/introduction-source-maps) to enhance the debugging process. These values can affect build and rebuild speed dramatically. - -T> The webpack repository contains an [example showing the effect of all `devtool` variants](https://github.com/webpack/webpack/tree/master/examples/source-map). Those examples will likely help you to understand the differences. - -devtool | build | rebuild | production | quality ------------------------------ | ----- | ------- | ---------- | ----------------------------- -eval | +++ | +++ | no | generated code -cheap-eval-source-map | + | ++ | no | transformed code (lines only) -cheap-source-map | + | o | yes | transformed code (lines only) -cheap-module-eval-source-map | o | ++ | no | original source (lines only) -cheap-module-source-map | o | - | yes | original source (lines only) -eval-source-map | -- | + | no | original source -source-map | -- | -- | yes | original source -inline-source-map | -- | -- | no | original source -hidden-source-map | -- | -- | yes | original source -nosources-source-map | -- | -- | yes | without source content - -T> `+` means faster, `-` slower and `o` about the same time - -Some of these values are suited for development and some for production. For development you typically want fast Source Maps at the cost of bundle size, but for production you want separate Source Maps that are accurate. - -W> There are some issues with Source Maps in Chrome. [We need your help!](https://github.com/webpack/webpack/issues/3165). - -T> See [`output.sourceMapFilename`](/configuration/output#output-sourcemapfilename) to customize the filenames of generated Source Maps. - - -### Development - -The following options are ideal for development: - -`eval` - Each module is executed with `eval()` and `//@ sourceURL`. This is pretty fast. The main disadvantage is that it doesn't display line numbers correctly since it gets mapped to transpiled code instead of the original code. - -`inline-source-map` - A SourceMap is added as a DataUrl to the bundle. - -`eval-source-map` - Each module is executed with `eval()` and a SourceMap is added as a DataUrl to the `eval()`. Initially it is slow, but it provides fast rebuild speed and yields real files. Line numbers are correctly mapped since it gets mapped to the original code. - -`cheap-eval-source-map` - Similar to `eval-source-map`, each module is executed with `eval()`. However, with this option the Source Map is passed as a Data URL to the `eval()` call. It is "cheap" because it doesn't have column mappings, it only maps line numbers. - -`cheap-module-eval-source-map` - Similar to `cheap-eval-source-map`, however in this case this case loaders are able to process the mapping for better results. - - -### Production - -These options are typically used in production: - -`source-map` - A full SourceMap is emitted as a separate file. It adds a reference comment to the bundle so development tools know where to find it. - -`hidden-source-map` - Same as `source-map`, but doesn't add a reference comment to the bundle. Useful if you only want SourceMaps to map error stack traces from error reports, but don't want to expose your SourceMap for the browser development tools. - -`cheap-source-map` - A SourceMap without column-mappings ignoring loaded Source Maps. - -`cheap-module-source-map` - A SourceMap without column-mappings that simplifies loaded Source Maps to a single mapping per line. - -`nosources-source-map` - A SourceMap is created without the `sourcesContent` in it. It can be used to map stack traces on the client without exposing all of the source code. diff --git a/content/configuration/target.md b/content/configuration/target.md deleted file mode 100644 index 732e1cc08465..000000000000 --- a/content/configuration/target.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Target -sort: 11 -contributors: - - juangl - - sokra - - skipjack - - SpaceK33z - - pastelsky ---- - -webpack can compile for multiple environments or _targets_. To understand what a target is in detail, read [the concepts](/concepts/targets). - -## `target` - -`string` - -Tells webpack which environment the application is targeting. The following values are supported via [`WebpackOptionsApply`](https://github.com/webpack/webpack/blob/master/lib/WebpackOptionsApply.js): - -| `target` | Description | -| ------------- |------------------------| -| `async-node`| Compile for usage in a Node.js-like environment (uses `fs` and `vm` to load chunks asynchronously) | -| ~~`atom`~~ | Alias for `electron-main` | -| ~~`electron`~~ | Alias for `electron-main` | -| `electron-main` | Compile for [Electron](http://electron.atom.io/) for main process. | -| `electron-renderer` | Compile for [Electron](http://electron.atom.io/) for renderer process, providing a target using `JsonpTemplatePlugin`, `FunctionModulePlugin` for browser environments and `NodeTargetPlugin` and `ExternalsPlugin` for CommonJS and Electron built-in modules. | -| `node` | Compile for usage in a Node.js-like environment (uses Node.js `require` to load chunks) | -|`node-webkit`| Compile for usage in WebKit and uses JSONP for chunk loading. Allows importing of built-in Node.js modules and [`nw.gui`](http://docs.nwjs.io/en/latest/) (experimental) | -|`web`| Compile for usage in a browser-like environment **(default)** | -|`webworker`| Compile as WebWorker | - -For example, when the `target` is set to `"electron"`, webpack includes multiple electron specific variables. For more information on which templates and externals are used, you can refer to webpack's [source code](https://github.com/webpack/webpack/blob/master/lib/WebpackOptionsApply.js#L70-L185). diff --git a/content/guides/build-performance.md b/content/guides/build-performance.md deleted file mode 100644 index 23c2fd3ba764..000000000000 --- a/content/guides/build-performance.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Build Performance -sort: 25 ---- - -?> incremental builds - -?> profile - -?> analyse tool - -?> dirty chunks ([chunkhash]) - -?> source maps - -?> PrefetchPlugin - -?> resolving - -?> DllPlugin - -[Development Tools](/guides/development/#choosing-a-tool) - -> see also [resolving](/concepts/module-resolution/#resolving-rules-in-webpack) diff --git a/content/guides/caching.md b/content/guides/caching.md deleted file mode 100644 index 41fd860d8bbe..000000000000 --- a/content/guides/caching.md +++ /dev/null @@ -1,289 +0,0 @@ ---- -title: Caching -sort: 9 -contributors: - - okonet - - jouni-kantola -related: - - title: Predictable Long Term Caching - url: https://medium.com/webpack/predictable-long-term-caching-with-webpack-d3eee1d3fa31 ---- - -To enable long-term caching of static resources produced by webpack: - -1. Use `[chunkhash]` to add a content-dependent cache-buster to each file. -2. Extract the webpack manifest into a separate file. -3. Ensure that the entry point chunk containing the bootstrapping code doesn’t change hash over time for the same set of dependencies. - -For an even more optimized setup: - -1. Use compiler stats to get the file names when requiring resources in HTML. -2. Generate the chunk manifest JSON and inline it into the HTML page before loading resources. - - -## The problem - -Each time something needs to be updated in our code, it has to be re-deployed on the server and then re-downloaded by all clients. This is clearly inefficient since fetching resources over the network can be slow. This is why browsers cache static resources. - -The way it works has a pitfall: If we don’t change filenames of our resources when deploying a new version, the browser might think it hasn’t been updated and client will get a cached version of it. - -A simple way to tell the browser to download a newer version is to alter the asset’s file name. In a pre-webpack era we used to add a build number to the filenames as a parameter and then increment it: - -```bash -application.js?build=1 -application.css?build=1 -``` - -It is even easier to do with webpack. Each webpack build generates a unique hash which can be used to compose a filename, by including output [substitutions](/configuration/output#output-filename). The following example config will generate 2 files (1 per entry) with hashes in filenames: - -```js -// webpack.config.js -const path = require("path"); - -module.exports = { - entry: { - vendor: "./src/vendor.js", - main: "./src/index.js" - }, - output: { - path: path.join(__dirname, "build"), - filename: "[name].[hash].js" - } -}; -``` - -Running webpack with this config will produce the following output: - -```bash -Hash: 2a6c1fee4b5b0d2c9285 -Version: webpack 2.2.0 -Time: 62ms - Asset Size Chunks Chunk Names -vendor.2a6c1fee4b5b0d2c9285.js 2.58 kB 0 [emitted] vendor - main.2a6c1fee4b5b0d2c9285.js 2.57 kB 1 [emitted] main - [0] ./src/index.js 63 bytes {1} [built] - [1] ./src/vendor.js 63 bytes {0} [built] -``` - -But the problem here is, builds after *any file update* will update all filenames and clients will have to re-download all application code. So how can we guarantee that clients always get the latest versions of assets without re-downloading all of them? - - -## Generating unique hashes for each file - -What if we could produce the same filename, if the contents of the file did not change between builds? For example, it would be unnecessary to re-download a vendor file, when no dependencies have been updated, only application code. - -webpack allows you to generate hashes depending on file contents, by replacing the placeholder `[hash]` with `[chunkhash]`. Here is the updated config: - -```diff -module.exports = { - /*...*/ - output: { - /*...*/ -- filename: "[name].[hash].js" -+ filename: "[name].[chunkhash].js" - } -}; -``` - -This config will also create 2 files, but in this case, each file will get its own unique hash. - -```bash -Hash: cfba4af36e2b11ef15db -Version: webpack 2.2.0 -Time: 66ms - Asset Size Chunks Chunk Names -vendor.50cfb8f89ce2262e5325.js 2.58 kB 0 [emitted] vendor - main.70b594fe8b07bcedaa98.js 2.57 kB 1 [emitted] main - [0] ./src/index.js 63 bytes {1} [built] - [1] ./src/vendor.js 63 bytes {0} [built] -``` - -T> Don’t use [chunkhash] in development since this will increase compilation time. Separate development and production configs and use [name].js for development and [name].[chunkhash].js in production. - - -## Get filenames from webpack compilation stats - -When working in development mode, you just reference JavaScript files by entry point name in your HTML. - -```html - - -``` - -Although, each time we build for production, we’ll get different file names. Something, that looks like this: - -```html - - -``` - -In order to reference a correct file in the HTML, we’ll need information about our build. This can be extracted from webpack compilation stats by using this plugin: - -```js -// webpack.config.js -const path = require("path"); - -module.exports = { - /*...*/ - plugins: [ - function() { - this.plugin("done", function(stats) { - require("fs").writeFileSync( - path.join(__dirname, "build", "stats.json"), - JSON.stringify(stats.toJson())); - }); - } - ] -}; -``` - -Alternatively, just use one of these plugins to export JSON files: - -* https://www.npmjs.com/package/webpack-manifest-plugin -* https://www.npmjs.com/package/assets-webpack-plugin - -A sample output when using `WebpackManifestPlugin` in our config looks like: - -```json -{ - "main.js": "main.155567618f4367cd1cb8.js", - "vendor.js": "vendor.c2330c22cd2decb5da5a.js" -} -``` - - -## Deterministic hashes - -To minimize the size of generated files, webpack uses identifiers instead of module names. During compilation, identifiers are generated, mapped to chunk filenames and then put into a JavaScript object called *chunk manifest*. -To generate identifiers that are preserved over builds, webpack supplies the `NamedModulesPlugin` (recommended for development) and `HashedModuleIdsPlugin` (recommended for production). - -?> When exist, link to `NamedModulesPlugin` and `HashedModuleIdsPlugin` docs pages - -?> Describe how the option `recordsPath` option works - -The chunk manifest (along with bootstrapping/runtime code) is then placed into the entry chunk and it is crucial for webpack-packaged code to work. - -T> Separate your vendor and application code with [CommonsChunkPlugin](/plugins/commons-chunk-plugin) and create an explicit vendor chunk to prevent it from changing too often. When `CommonsChunkPlugin` is used, the runtime code is moved to the *last* common entry. - -The problem with this, is the same as before: Whenever we change any part of the code it will, even if the rest of its contents wasn’t altered, update our entry chunk to include the new manifest. This in turn, will lead to a new hash and dismiss the long-term caching. - -To fix that, we should use [`ChunkManifestWebpackPlugin`](https://github.com/diurnalist/chunk-manifest-webpack-plugin), which will extract the manifest to a separate JSON file. This replaces the chunk manifest with a variable in the webpack runtime. But we can do even better; we can extract the runtime into a separate entry by using `CommonsChunkPlugin`. Here is an updated `webpack.config.js` which will produce the manifest and runtime files in our build directory: - -```js -// webpack.config.js -var ChunkManifestPlugin = require("chunk-manifest-webpack-plugin"); - -module.exports = { - /*...*/ - plugins: [ - /*...*/ - new webpack.optimize.CommonsChunkPlugin({ - name: ["vendor", "manifest"], // vendor libs + extracted manifest - minChunks: Infinity, - }), - /*...*/ - new ChunkManifestPlugin({ - filename: "chunk-manifest.json", - manifestVariable: "webpackManifest" - }) - ] -}; -``` - -As we removed the manifest from the entry chunk, now it’s our responsibility to provide webpack with it. The `manifestVariable` option in the example above is the name of the global variable where webpack will look for the manifest JSON. This *should be defined before we require our bundle in HTML*. This is achieved by inlining the contents of the JSON in HTML. Our HTML head section should look like this: - -```html - - - - - - - -``` - -At the end of the day, the hashes for the files should be based on the file content. For this use [webpack-chunk-hash](https://github.com/alexindigo/webpack-chunk-hash) or [webpack-md5-hash](https://github.com/erm0l0v/webpack-md5-hash). - -So the final `webpack.config.js` should look like this: - -```js -var path = require("path"); -var webpack = require("webpack"); -var ChunkManifestPlugin = require("chunk-manifest-webpack-plugin"); -var WebpackChunkHash = require("webpack-chunk-hash"); - -module.exports = { - entry: { - vendor: "./src/vendor.js", // vendor reference file(s) - main: "./src/index.js" // application code - }, - output: { - path: path.join(__dirname, "build"), - filename: "[name].[chunkhash].js", - chunkFilename: "[name].[chunkhash].js" - }, - plugins: [ - new webpack.optimize.CommonsChunkPlugin({ - name: ["vendor", "manifest"], // vendor libs + extracted manifest - minChunks: Infinity, - }), - new webpack.HashedModuleIdsPlugin(), - new WebpackChunkHash(), - new ChunkManifestPlugin({ - filename: "chunk-manifest.json", - manifestVariable: "webpackManifest", - inlineManifest: true - }) - ] -}; -``` - -Using this config the vendor chunk should not be changing its hash, unless you update its code or dependencies. Here is a sample output for 2 runs with `moduleB.js` being changed between the runs: - -``` bash -> node_modules/.bin/webpack - -Hash: f0ae5bf7c6a1fd3b2127 -Version: webpack 2.2.0 -Time: 102ms - Asset Size Chunks Chunk Names - main.9ebe4bf7d99ffc17e75f.js 509 bytes 0, 2 [emitted] main - vendor.81adc64d405c8b218485.js 159 bytes 1, 2 [emitted] vendor - chunk-manifest.json 73 bytes [emitted] -manifest.d41d8cd98f00b204e980.js 5.56 kB 2 [emitted] manifest -``` - -``` bash -> node_modules/.bin/webpack - -Hash: b5fb8e138b039ab515f3 -Version: webpack 2.2.0 -Time: 87ms - Asset Size Chunks Chunk Names - main.5f020f80c23aa50ebedf.js 521 bytes 0, 2 [emitted] main - vendor.81adc64d405c8b218485.js 159 bytes 1, 2 [emitted] vendor - chunk-manifest.json 73 bytes [emitted] -manifest.d41d8cd98f00b204e980.js 5.56 kB 2 [emitted] manifest -``` - -Notice that **vendor chunk has the same filename**, and **so does the manifest** since we’ve extracted the manifest chunk! - - -## Manifest inlining - -Inlining the chunk manifest and webpack runtime (to prevent extra HTTP requests), depends on your server setup. There is a nice [walkthrough for Rails-based projects](https://brigade.engineering/setting-up-webpack-with-rails-c62aea149679). For server-side rendering in Node.js you can use [webpack-isomorphic-tools](https://github.com/halt-hammerzeit/webpack-isomorphic-tools). - -T> If your application doesn’t rely on any server-side rendering, it’s often enough to generate a single `index.html` file for your application. To do so, use i.e. [`HtmlWebpackPlugin`](https://github.com/ampedandwired/html-webpack-plugin) in combination with [`ScriptExtHtmlWebpackPlugin`](https://github.com/numical/script-ext-html-webpack-plugin) or [`InlineManifestWebpackPlugin`](https://github.com/szrenwei/inline-manifest-webpack-plugin). It will simplify the setup dramatically. - - -## References - -* https://medium.com/@okonetchnikov/long-term-caching-of-static-assets-with-webpack-1ecb139adb95#.vtwnssps4 -* https://gist.github.com/sokra/ff1b0290282bfa2c037bdb6dcca1a7aa -* https://github.com/webpack/webpack/issues/1315 -* https://github.com/webpack/webpack.js.org/issues/652 -* https://presentations.survivejs.com/advanced-webpack/ diff --git a/content/guides/code-splitting-async.md b/content/guides/code-splitting-async.md deleted file mode 100644 index a884556fea4b..000000000000 --- a/content/guides/code-splitting-async.md +++ /dev/null @@ -1,375 +0,0 @@ ---- -title: Code Splitting - Async -sort: 17 -contributors: - - simon04 - - levy9527 - - pksjce - - rahulcs - - johnstew -related: - - title: Lazy Loading ES2015 Modules in the Browser - url: https://dzone.com/articles/lazy-loading-es2015-modules-in-the-browser ---- - -This guide documents how to split your bundle into chunks which can be downloaded asynchronously at a later time. For instance, this allows to serve a minimal bootstrap bundle first and to asynchronously load additional features later. - -webpack supports two similar techniques to achieve this goal: using `import()` (preferred, ECMAScript proposal) and `require.ensure()` (legacy, webpack specific). - - -## Dynamic import: `import()` - -Currently, a "function-like" `import()` module loading [syntax proposal](https://github.com/tc39/proposal-dynamic-import) is on the way into ECMAScript. - -The [ES2015 Loader spec](https://whatwg.github.io/loader/) defines `import()` as method to load ES2015 modules dynamically on runtime. - -webpack treats `import()` as a split-point and puts the requested module in a separate chunk. -`import()` takes the module name as argument and returns a `Promise`: `import(name) -> Promise` - -__index.js__ - -```javascript -function determineDate() { - import('moment').then(function(moment) { - console.log(moment().format()); - }).catch(function(err) { - console.log('Failed to load moment', err); - }); -} - -determineDate(); -``` - -Note that fully dynamic statements, such as `import(foo)`, __will fail__ because webpack requires at least some file location information. This is because `foo` could potentially be any path to any file in your system or project. The `import()` must contain at least some information about where the module is located, so bundling can be limited to a specific directory or set of files. - -For example, ``import(`./locale/${language}.json`)`` will cause every `.json` file in the `./locale` directory to be bundled into the split-point. At run time, when the variable `language` has been computed, any file like `english.json` or `german.json` will be available for consumption. So keep in mind that when using `import()`, the path must contain some path information or be completely static (as is `'moment'` in the example above). - - -### Promise polyfill - -W> `import()` relies on [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) internally. - -If you use `import()` with older browsers, remember to shim `Promise` using a polyfill such as [es6-promise](https://github.com/stefanpenner/es6-promise) or [promise-polyfill](https://github.com/taylorhakes/promise-polyfill). - -In an entry point of your application: - -```javascript -import Es6Promise from 'es6-promise'; -Es6Promise.polyfill(); -// or -import 'es6-promise/auto'; -// or -import Promise from 'promise-polyfill'; -if (!window.Promise) { - window.Promise = Promise; -} -// or ... -``` - - -### Chunk names - -Since webpack 2.4.0, chunk names for dynamic imports can be specified using a "magic comment". - -```javascript -import(/* webpackChunkName: "my-chunk-name" */ 'module'); -``` - -Since webpack 2.6.0, the placeholders `[index]`, `[request]` are supported: - -```javascript -// will generate files like `i18n/namespace-i18n-bundle-en_json` -import(/* webpackChunkName: "i18n/[request]" */ `i18n/${namespace}-i18n-bundle-${language}.json`).then(...) - -// will generate files `i18n-0`, `i18n-1`, … -import(/* webpackChunkName: "i18n-[index]" */ `i18n/${namespace}-i18n-bundle-${language}.json`).then(...) -``` - -### Import mode - -Since webpack 2.6.0, different modes for resolving dynamic imports can be specified. - -```javascript -import(/* webpackMode: "lazy" */ `i18n/${namespace}-i18n-bundle-${language}.json`).then(...) -``` - -The following modes are supported: - -* `"lazy"`: The default behavior. Lazy generates a chunk per request. So everything is lazy loaded. -* `"lazy-once"`: Only available for imports with expression. Generates a single chunk for all possible requests. So the first request causes a network request for all modules, all following requests are already fulfilled. -* `"eager"`: Eager generates no chunk. All files are included in the current chunk. No network request is required to load the files. It still returns a Promise but it's already resolved. In contrast to a static import, it skips evaluating until the request is made. - -You can combine both options (`webpackChunkName` and `webpackMode`). It's parsed a JSON5 object without curly brackets: - -```javascript -import(/* webpackMode: "lazy-once", webpackChunkName: "all-i18n-data" */ `i18n/${namespace}-i18n-bundle-${language}.json`).then(...) -``` - - -### Usage with Babel - -If you want to use `import` with [Babel](http://babeljs.io/), you'll need to install/add the [`syntax-dynamic-import`](http://babeljs.io/docs/plugins/syntax-dynamic-import/) plugin while it's still Stage 3 to get around the parser error. When the proposal is added to the spec this won't be necessary anymore. - -```bash -npm install --save-dev babel-core babel-loader babel-plugin-syntax-dynamic-import babel-preset-es2015 -# for this example -npm install --save moment -``` - -__index-es2015.js__ - -```javascript -function determineDate() { - import('moment') - .then(moment => moment().format('LLLL')) - .then(str => console.log(str)) - .catch(err => console.log('Failed to load moment', err)); -} - -determineDate(); -``` - -__webpack.config.js__ - -```javascript -module.exports = { - entry: './index-es2015.js', - output: { - filename: 'dist.js', - }, - module: { - rules: [{ - test: /\.js$/, - exclude: /(node_modules)/, - use: [{ - loader: 'babel-loader', - options: { - presets: [['es2015', {modules: false}]], - plugins: ['syntax-dynamic-import'] - } - }] - }] - } -}; -``` - -Not using the `syntax-dynamic-import` plugin will fail the build with: - -```javascript -Module build failed: SyntaxError: 'import' and 'export' may only appear at the top level -``` - -or - -```javascript -Module build failed: SyntaxError: Unexpected token, expected { -``` - - -### Usage with Babel and `async`/`await` - -To use ES2017 [`async`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)/[`await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await) with `import()`: - -```bash -npm install --save-dev babel-plugin-transform-async-to-generator babel-plugin-transform-regenerator babel-plugin-transform-runtime babel-plugin-syntax-async-functions -``` - -__index-es2017.js__ - -```javascript -async function determineDate() { - const moment = await import('moment'); - return moment().format('LLLL'); -} - -determineDate().then(str => console.log(str)); -``` - -__webpack.config.js__ - -```javascript -module.exports = { - entry: './index-es2017.js', - output: { - filename: 'dist.js', - }, - module: { - rules: [{ - test: /\.js$/, - exclude: /(node_modules)/, - use: [{ - loader: 'babel-loader', - options: { - presets: [['es2015', {modules: false}]], - plugins: [ - 'syntax-async-functions', - 'syntax-dynamic-import', - 'transform-async-to-generator', - 'transform-regenerator', - 'transform-runtime' - ] - } - }] - }] - } -}; -``` - - -### `import()` imports the entire module namespace - -Note that the promise is [resolved with the module namespace](https://github.com/tc39/proposal-dynamic-import#proposed-solution). Consider the following two examples: - -```js -// Example 1: top-level import -import * as Component from './component'; -// Example 2: Code Splitting with import() -import('./component').then(Component => /* ... */); -``` - -`Component` in both of those cases resolves to the same thing, meaning in the case of using `import()` with ES2015 modules you have to explicitly access default and named exports: - -```js -async function main() { - // Destructuring example - const { default: Component } = await import('./component'); - // Inline example - render((await import('./component')).default); -} -``` - - -### `System.import` is deprecated - -The use of `System.import` in webpack [did not fit the proposed spec](https://github.com/webpack/webpack/issues/2163), so it was deprecated in webpack [2.1.0-beta.28](https://github.com/webpack/webpack/releases/tag/v2.1.0-beta.28) in favor of `import()`. - - -## `require.ensure()` - -W> `require.ensure()` is specific to webpack and superseded by `import()`. - -webpack statically parses for `require.ensure()` in the code while building. Any module that is referenced as a dependency or `require()`d within the callback function, will be added to a new chunk. This new chunk is written to an async bundle that is loaded on demand by webpack through jsonp. - -The syntax is as follows: - -```javascript -require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String) -``` - -* `dependencies` is an array of strings where we can declare all the modules that need to be made available before all the code in the callback function can be executed. -* `callback` is a function that webpack will execute once the dependencies are loaded. An implementation of the `require` function is sent as a parameter to this function. The function body can use this to further `require()` modules it needs for execution. - -W> Although the implementation of `require` is passed as an argument to the callback function, using an arbitrary name e.g. `require.ensure([], function (request) { request('someModule'); })` isn't handled by webpack's static parser. Use `require` instead: `require.ensure([], function (require) { require('someModule'); })` - -* optional: `errorCallback` is a function that is executed when webpack fails to load the dependencies. -* optional: `chunkName` is a name given to the chunk created by this particular `require.ensure()`. By passing the same `chunkName` to various `require.ensure()` calls, we can combine their code into a single chunk, resulting in only one bundle that the browser must load. - -Let's reconsider the dynamic import of `moment` from the `import()` section and rewrite it using `require.ensure()`: - -__index.js__ - -```javascript -function determineDate() { - require.ensure([], function(require) { - var moment = require('moment'); - console.log(moment().format()); - }); -} - -determineDate(); -``` - -Running `webpack index.js bundle.js` generates two files, `bundle.js` and `0.bundle.js`: - -__bundle.js__ - -```js -// webpack code ... -/***/ (function(module, exports, __webpack_require__) { - -function determineDate() { - __webpack_require__.e/* require.ensure */(0).then((function(require) { - var moment = __webpack_require__(0); - console.log(moment().format()); - }).bind(null, __webpack_require__)).catch(__webpack_require__.oe); -} - -determineDate(); -// webpack code ... -``` - -__0.bundle.js__ - -```js -webpackJsonp([0],[(function(module, exports, __webpack_require__) { -/* WEBPACK VAR INJECTION */(function(module) { - -//! moment.js - -})]); -``` - -When you add `bundle.js` in your HTML file and open it in your browser, the `0.bundle.js` will be loaded asynchronously by webpack. - - -### publicPath - -`output.publicPath` is an important option when using Code Splitting, it is used to tell webpack where to load your bundles on-demand, see the [configuration documentation](/configuration/output/#output-publicpath). - - -### Chunk name - -```javascript -require.ensure([], function(require) { - var foo = require('./module'); -}, 'custom-chunk-name'); -``` - -Use the last argument to `require.ensure()` in order to specify the name of the chunk. - - -### Error callback - -Since webpack 2.4.0, an error callback can be as third argument to `require.ensure()`. This allows to address errors which occur when dynamically loading the chunk: - -```javascript -require.ensure([], function(require) { - var foo = require('./module'); -}, function(err) { - console.error('We failed to load chunk: ' + err); -}, 'custom-chunk-name'); -``` - - -### Empty Array as Parameter - -```javascript -require.ensure([], function(require){ - require('./a.js'); -}); -``` - -The above code ensures that a split point is created and `a.js` is bundled separately by webpack. - - -### Dependencies as Parameter - -```javascript -require.ensure(['./b.js'], function(require) { - require('./c.js'); -}); -``` - -In the above code, `b.js` and `c.js` are bundled together and split from the main bundle. But only the contents of `c.js` are executed. The contents of `b.js` are only made available and not executed. -To execute `b.js`, we will have to require it in a sync manner like `require('./b.js')` for the JavaScript to get executed. - - -## Examples - -* `import()` -* * https://github.com/webpack/webpack/tree/master/examples/harmony -* * https://github.com/webpack/webpack/tree/master/examples/code-splitting-harmony -* * https://github.com/webpack/webpack/tree/master/examples/code-splitting-native-import-context -* `require.ensure()` -* * https://github.com/webpack/webpack/tree/master/examples/code-splitting -* * https://github.com/webpack/webpack/tree/master/examples/named-chunks – illustrates the use of `chunkName` diff --git a/content/guides/code-splitting-css.md b/content/guides/code-splitting-css.md deleted file mode 100644 index d629e21c0c90..000000000000 --- a/content/guides/code-splitting-css.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Code Splitting - CSS -sort: 15 -contributors: - - pksjce - - jonwheeler - - johnstew - - simon04 - - shinxi - - tomtasche ---- - -To bundle CSS files with webpack, import CSS into your JavaScript code like [any other module](/concepts/modules), and use the `css-loader` (which outputs the CSS as JS module), and optionally apply the `ExtractTextWebpackPlugin` (which extracts the bundled CSS and outputs CSS files). - - -## Importing CSS - -Import the CSS file like a JavaScript module, for instance in `vendor.js`: - -```javascript -import 'bootstrap/dist/css/bootstrap.css'; -``` - - -## Using `css-loader` and `style-loader` - -Install the [`css-loader`](/loaders/css-loader) and [`style-loader`](/loaders/style-loader): - -``` bash -npm install --save-dev css-loader style-loader -``` - -Configure it in `webpack.config.js` as follows: - -```javascript -module.exports = { - module: { - rules: [{ - test: /\.css$/, - use: [ 'style-loader', 'css-loader' ] - }] - } -} -``` - -As a result, the CSS is bundled along with your JavaScript and applied to the page via a `