django-webpack-loader - Transparently use webpack with django

  •        31

Read http://owaislone.org/blog/webpack-plus-reactjs-and-django/ for a detailed step by step guide on setting up webpack with django using this library. Use webpack to generate your static bundles without django's staticfiles or opaque wrappers.

https://github.com/owais/django-webpack-loader

Tags
Implementation
License
Platform

   




Related Projects

isomorphic-style-loader - CSS style loader for Webpack that is optimized for isomorphic (universal) web apps

  •    Javascript

CSS style loader for Webpack that works similarly to style-loader, but is optimized for critical path CSS rendering and also works great in the context of isomorphic apps. It provides two helper methods on to the styles object - ._insertCss() (injects CSS into the DOM) and ._getCss() (returns a CSS string).Note: Configuration is the same for both client-side and server-side bundles. For more information visit https://webpack.js.org/configuration/module/.

vue-django - @Django integrated with a full-featured @Webpack + (@vuejs / vue-loader) setup with hot reload, linting, testing & css extraction

  •    Javascript

@NdagiStanley has mirrored the fork to have this repo here. This starterpack has proved useful to many and I thank you for the emails I have received from all of you. The reasoning behind this mirror is that this is an effort to support the users more by developing further on this project. From here on, I am calling on all potential collaborators by making it easier to make PRs and adding utility of Issues in this 'new' repo (Of course with the same name :) ). Lastly, just so you know, I'll be keeping up with developments in the original. If you are using vue-cli@1.x, it will be pulling the master branch of this template by default. If you are using vue-cli@2.x, it will be pulling the dist branch instead, which provides more configurable options thanks to new features in vue-cli@2.x. It is recommended to upgrade vue-cli as soon as you can.

ts-loader - TypeScript loader for webpack

  •    Javascript

This is the typescript loader for webpack. We have a number of example setups to accomodate different workflows. From "vanilla" ts-loader, to using ts-loader in combination with babel for transpilation, happypack or thread-loader for faster builds and fork-ts-checker-webpack-plugin for performing type checking in a separate process. Not forgetting Hot Module Replacement. Our examples can be found here.

webpack-validator - Validates your webpack config with Joi

  •    Javascript

Writing webpack configs is brittle and error-prone. This package provides a joi object schema for webpack configs. This gets you a) static type safety, b) property spell checking and c) semantic validations such as "loader and loaders can not be used simultaneously" or "query can only be used with loader, not with loaders". You're very welcome to give feedback & PR's.

workerize-loader - 🏗️ Automatically move a module into a Web Worker (Webpack loader)

  •    Javascript

A webpack loader that moves a module and its dependencies into a Web Worker, automatically reflecting exported functions as asynchronous proxies.


sass-loader - Compiles Sass to CSS

  •    HTML

Loads a Sass/SCSS file and compiles it to CSS. Use the css-loader or the raw-loader to turn it into a JS module and the mini-css-extract-plugin to extract it into a separate file. Looking for the webpack 1 loader? Check out the archive/webpack-1 branch.

svg-sprite-loader - Webpack loader for creating SVG sprites.

  •    Javascript

Webpack loader for creating SVG sprites. 🎉 2.0 is out, please read the migration guide & overview.

elm-webpack-loader - Webpack loader for the Elm programming language.

  •    Javascript

Webpack loader for the Elm programming language. It is aware of Elm dependencies and tracks them. This means that in --watch mode, if you require an Elm module from a Webpack entry point, not only will that .elm file be watched for changes, but any other Elm modules it imports will be watched for changes as well.

url-loader - A loader for webpack which transforms files into base64 URIs

  •    Javascript

A loader for webpack which transforms files into base64 URIs. This module requires a minimum of Node v6.9.0 and Webpack v4.0.0.

bootstrap-loader - Load Bootstrap styles and scripts in your Webpack bundle

  •    Javascript

If your team might need my help, please email me for a free half-hour project consultation, on anything from React on Rails to any aspect of web or mobile application development for both consumer and enterprise products. Intersted in optimizing your webpack setup for React on Rails including code splitting with react-router v4, webpack v4, and react-loadable? Contact me.

react-proxy-loader - Wraps a react component in a proxy component to enable Code Splitting.

  •    Javascript

Wraps a react component in a proxy component to enable Code Splitting, which loads a react component and its dependencies on demand. This module requires a minimum of Node v6.9.0 and Webpack v4.0.0.

inject-loader - 💉👾 A Webpack loader for injecting code into modules via their dependencies.

  •    Javascript

This is particularly useful for writing tests where mocking things inside your module-under-test is sometimes necessary before execution. inject-loader was inspired by, and builds upon ideas introduced in jauco/webpack-injectable.

worker-loader - A webpack loader that registers a script as a Web Worker

  •    Javascript

This module requires a minimum of Node v6.9.0 and Webpack v4.0.0. And run webpack via your preferred method.

file-loader - File Loader

  •    Javascript

This module requires a minimum of Node v6.9.0 and works with Webpack v3 and Webpack v4. And run webpack via your preferred method. This will emit file.png as a file in the output directory (with the specified naming convention, if options are specified to do so) and returns the public URI of the file.

raw-loader - A loader for webpack that allows importing files as a String

  •    Javascript

A loader for webpack that allows importing files as a String. This module requires a minimum of Node v6.9.0 and Webpack v4.0.0.

svg-inline-loader - Inline SVG loader with cleaning-up functionality

  •    Javascript

This Webpack loader inlines SVG as module. If you use Adobe suite or Sketch to export SVGs, you will get auto-generated, unneeded crusts. This loader removes it for you, too. Simply add configuration object to module.loaders like this.

stylelint-webpack-plugin - A webpack plugin to lint your CSS/Sass code using stylelint

  •    Javascript

This module requires a minimum of Node v6.9.0 and webpack v4.0.0. Both stylelint-loader and this module have their uses. stylelint-loader lints the files you require (or the ones you define as an entry in your webpack config). However, @imports in files are not followed, meaning only the main file for each require/entry is linted.

babel-plugin-webpack-loaders - babel 6 plugin which allows to use webpack loaders

  •    Javascript

Since plugin was published, there were a lot of changes in testing software. Be sure in most(all) cases you DON'T need this plugin for testing. I highly recommend you to use jest for testing, and use moduleNameMapper (identity-obj-proxy, etc) to mock CSS-Modules and other webpack loaders. This Babel 6 plugin allows you to use webpack loaders in Babel. It's now easy to run universal apps on the server without additional build steps, to create libraries as usual with babel src --out-dir lib command, to run tests without mocking-prebuilding source code. It just replaces require - import statements with webpack loaders results. Take a look at this Babel build output diff to get the idea.