You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

66 lines
2.1 KiB

4 years ago
  1. # Riot.js webpack-loader
  2. [![Build Status][travis-image]][travis-url]
  3. [![Issue Count][codeclimate-image]][codeclimate-url]
  4. [![NPM version][npm-version-image]][npm-url]
  5. [![NPM downloads][npm-downloads-image]][npm-url]
  6. [![MIT License][license-image]][license-url]
  7. Riot.js official webpack loader
  8. ## Important
  9. If you are using Riot.js < 4.0.0 please check the [v3 branch](https://github.com/riot/webpack-loader/tree/v3)
  10. ## Installation
  11. ```shell
  12. npm i @riotjs/webpack-loader @riotjs/compiler -D
  13. ```
  14. ## Usage
  15. Add the `@riotjs/webpack-loader` in your `webpack.config.js` file
  16. ```js
  17. module.exports = {
  18. module: {
  19. rules: [
  20. {
  21. test: /\.riot$/,
  22. exclude: /node_modules/,
  23. use: [{
  24. loader: '@riotjs/webpack-loader',
  25. options: {
  26. hot: false, // set it to true if you are using hmr
  27. // add here all the other @riotjs/compiler options riot.js.org/compiler
  28. // template: 'pug' for example
  29. }
  30. }]
  31. }
  32. ]
  33. }
  34. }
  35. ```
  36. If you want to enable hmr via `hot` option you will need to install also [`@riotjs/hot-reload`](https://www.npmjs.com/package/@riotjs/hot-reload)
  37. ```shell
  38. npm i @riotjs/hot-reload -D
  39. ```
  40. And afterwards webpack will be able to automatically reload your Riot.js components in runtime.
  41. ## Examples
  42. Please check [this simple example](https://github.com/riot/examples/tree/gh-pages/webpack) to see how it's easy to configure webpack with riot
  43. [travis-image]: https://img.shields.io/travis/riot/webpack-loader.svg?style=flat-square
  44. [travis-url]: https://travis-ci.org/riot/webpack-loader
  45. [license-image]: https://img.shields.io/badge/license-MIT-000000.svg?style=flat-square
  46. [license-url]: LICENSE
  47. [npm-version-image]: https://img.shields.io/npm/v/@riotjs/webpack-loader.svg?style=flat-square
  48. [npm-downloads-image]: https://img.shields.io/npm/dm/@riotjs/webpack-loader.svg?style=flat-square
  49. [npm-url]: https://npmjs.org/package/@riotjs/webpack-loader
  50. [codeclimate-image]: https://api.codeclimate.com/v1/badges/8c3dc0302a42730e8fba/maintainability
  51. [codeclimate-url]: https://codeclimate.com/github/riot/webpack-loader/maintainability