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

  •        7

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.

https://github.com/istarkov/babel-plugin-webpack-loaders

Dependencies:

babel-preset-es2015 : ^6.3.13
babel-preset-stage-0 : ^6.5.0
babel-register : ^6.4.3
babel-traverse : ^6.3.26
babel-types : ^6.3.24
babylon : ^6.3.26
colors : ^1.1.2
enhanced-resolve : ^2.2.2
lodash : ^4.6.1
rimraf : ^2.5.0

Tags
Implementation
License
Platform

   




Related Projects

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.

sku - Front-end development toolkit, powered by Webpack, Babel, CSS Modules, Less, ESLint and Jest.

  •    Javascript

Front-end development toolkit, powered by Webpack, Babel, CSS Modules, Less, ESLint and Jest. Quickly get up and running with a zero-config development environment, or optionally add minimal config when needed. Designed for usage with seek-style-guide, although this isn't a requirement.

babel-loader - 📦 Webpack plugin for Babel

  •    Javascript

This package allows transpiling JavaScript files using Babel and webpack.Notes: Issues with the output should be reported on the babel issue tracker.

webpack-starter - ✨ A lightweight foundation for your next webpack based frontend project.

  •    Javascript

A lightweight foundation for your next webpack based frontend project. When you run npm run build we use the mini-css-extract-plugin to move the css to a separate file and included in the head of your index.html, so that the styles are applied before any javascript gets loaded. We disabled this function for the dev version, because the loader doesn't support hot module replacement.


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.

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/.

css-loader - CSS Loader

  •    Javascript

The css-loader interprets @import and url() like import/require() and will resolve them. Good loaders for requiring your assets are the file-loader and the url-loader which you should specify in your config (see below).

react-css-components - Define React presentational components with CSS

  •    Javascript

Define React presentational components with CSS (or even SASS or Less if you like). The implementation is based on CSS modules. In fact React CSS Components is just a thin API on top of CSS modules.

Webpack - A bundler for javascript and friends

  •    Javascript

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.

redux-webpack-es6-boilerplate - A starter project for modern React apps with Redux

  •    Javascript

Note: If you still want to use a previous version, please checkout old-original-structure branch. A boilerplate using the power and simplicity of React, Redux, Webpack 2 + HMR, and ES6 + JSX via Babel. Includes Webpack's Tree Shaking configuration. It's suitable for scalable applications and organized using the custom variation of the Ducks pattern — approach when each module's entry file (feature-name.js) contains all of its related constants, actions/action creators, selectors and its reducer.

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.

ngtemplate-loader - Include AngularJS templates in the Webpack bundle and preload the template cache

  •    Javascript

Includes your AngularJS templates into your webpack Javascript Bundle. Pre-loads the AngularJS template cache to remove initial load times of templates. ngTemplate loader does not minify or process your HTML at all, and instead uses the standard loaders such as html-loader or raw-loader. This gives you the flexibility to pick and choose your HTML loaders.

webpack-demo - Working demo of CSS Modules, using Webpack's css-loader in module mode

  •    Javascript

A working demo of CSS Modules, using Webpack's css-loader in module mode. In this project's package.json file you find a lot of npm modules for this demo application. Since not all of them are required for the actual CSS modules features, we've created the following list to describe their purposes.

react-css-modules - Seamless mapping of class names to CSS modules inside of React components.

  •    Javascript

If you are considering to use react-css-modules, evaluate if babel-plugin-react-css-modules covers your use case. babel-plugin-react-css-modules is a lightweight alternative of react-css-modules. babel-plugin-react-css-modules is not a drop-in replacement and does not cover all the use cases of react-css-modules. However, it has a lot smaller performance overhead (0-10% vs +50%; see Performance) and a lot smaller size footprint (less than 2kb vs +17kb).

less-loader - Compiles Less to CSS

  •    Javascript

A Less loader for webpack. Compiles Less to CSS. This module requires a minimum of Node v6.9.0 and Webpack v4.0.0.

aspnet-starter-kit - Cross-platform web development with Visual Studio Code, C#, F#, JavaScript, ASP

  •    Javascript

ASP.NET Core Starter Kit is a real-world boilerplate and tooling for creating single-page web applications (SPA) oriented towards progressive enhancement design, cross-platform compatability and component-based UI architecture. It is built upon best of breed technologies including .NET Core, Kestrel, EF Core, Babel, Webpack, React, Redux, CSS Modules, React Hot Loader and more. This boilerplate comes in both C# and F# flavors.The app should become available at http://localhost:5000/. See run.js for other available commands such as node run build, node run publish etc. You can also run your app in a release (production) mode by running node run --release, or without Hot Module Replacement (HMR) by running node run --no-hmr.

react-native-babel - Configuration to build React Native apps with ES6 using webpack and Babel

  •    Objective-C

It's possible to write React Native apps in ES6+ using babel-loader and webpack. Check better approach using DependencyGraph module: dep-graph.

library-boilerplate - An opinionated boilerplate for React libraries including ESLint, Mocha, Babel, Webpack and an example powered by Webpack Dev Server and React Hot Loader

  •    Javascript

An opinionated setup I plan to use for my libraries. It has CommonJS and UMD builds via Babel and Webpack, ESLint, and Mocha. It also has React-friendly examples folder with library code mapped to the sources.

webpack-encore - A simple but powerful API for processing & compiling assets built around Webpack

  •    Javascript

Webpack Encore is a simpler way to integrate Webpack into your application. It wraps Webpack, giving you a clean & powerful API for bundling JavaScript modules, pre-processing CSS & JS and compiling and minifying assets. Encore gives you professional asset system that's a delight to use. Encore is inspired by Webpacker and Mix, but stays in the spirit of Webpack: using its features, concepts and naming conventions for a familiar feel. It aims to solve the most common Webpack use cases.