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.
Tags | webpack module-bundler module-loader loaders plugins build-tool web web-performance compiler javascript-compiler webpack2 commonjs amd esm es6 javascript-modules |
Implementation | Javascript |
License | MIT |
Platform | NodeJS |
steal is unique because it can load JavaScript modules defined in ES6, AMD, and CommonJS formats (unlike most other module loaders, which only support one of these formats at a time). In JavaScript, the word "modules" refers to small units of independent, reusable code. They are the foundation of many JavaScript design patterns, and can look like this in ES6.
stealjs module-loader amd build-tool commonjs module-bundler plugins web donejs modules es6 bundlingClosure Compiler is the most advanced JavaScript optimization tool. It generates smallest bundle and emits efficient JavaScript code by doing whole program analysis and optimization, removing closures and inlining function calls, as well as tree-shaking for AMD, CommonJS and ES2015 modules. While there's JavaScript version of Closure Compiler, the original compiler is written in Java and thus Java version is more complete and performs better in terms of JavaScript code optimizations and compilation speed. If you want to use Java-based compiler, make sure you have installed Java SDK.
closure-compiler webpack-closure-compiler optimization tree-shaking webpack closure compiler build optimize dead code pluginGuides, documentation, and all things webpack.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, which will soon be replaced by a more dev-specific issue.
webpack webpack2 webpack-plugin webpack-loader webpack-tutorial documentation docs web web-performance performance bundle bundler bundling nodejs css build toolParcel is a blazing fast zero configuration web application bundler. It automatically transforms modules using Babel, PostCSS, and PostHTML when needed - even node_modules. It has out of the box support for JS, CSS, HTML, file assets, and more - no plugins to install.
module-bundler build-tool css html assets web compiler commonjs es6 modules web-application-bundlerIMPORTANT! If you want to support the development of this book, you can purchase a copy at Leanpub. A part (~30%) of the proceedings will go directly to the author of webpack to support its development. Webpack, a module bundler, solves a significant problem for web developers. It can be daunting to learn but once you grok it, life gets easier. The purpose of this book is to make it easier to pick up the tool while learning more advanced techniques as well. You can read the book online.
survivejs webpack book book-series ebook frontend leanpub tutorial webpack-tutorial webpack2 webpack2-tutorial webpack3 webpack3-tutorial webpack3-demo webpack-4 reactThis project is part of esnext, which has merged with Babel. All the features of esnext are supported by Babel, and more. All the tests from esnext have been ported over to Babel to ensure that switchers will have minimal code changes to make. The maintainers of esnext will continue working on Babel to bring better spec compliance, ES6 feature support, and performance. If you want a fast tool with bundling support as found in this project, you should check out Rollup. ES6 Module Transpiler is an experimental compiler that allows you to write your JavaScript using a subset of the ES6 module syntax, and compile it into AMD or CommonJS modules.
es6 module transpile amd commonjsAs front-end developers, we spend a lot of time working with tools like Webpack, Browserify, and Parcel. Understanding how those tools work can help us make better decisions on how we write our code. By understanding how our code turns into a bundle and how that bundle looks like we can also debug it better.
parcel-bundler webpack example browserify modules commonjs es6-modules module-bundler es2015Since 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.
babel webpack loader css-modules css-loaderA webpack loader that moves a module and its dependencies into a Web Worker, automatically reflecting exported functions as asynchronous proxies.
webpack-loader webpack-plugin webpack worker web-worker loader thread workerizeOffload modules to Worker threads seamlessly using Comlink. The goal of comlink-loader is to make the fact that a module is running inside a Worker nearly transparent to the developer.
comlink worker webworker threading webpack webpack-loader loader web-worker threadThe fastest JavaScript bundler in the galaxy. Fully supports ECMAScript module syntax (import/export) in addition to CommonJS require(<string>). Because your bundler is too slow.
module-bundler es6 ecmascript commonjs modules bundler browser web build-toolIf 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.
bootstrap-loader bootstrap-variables shakacode bootstrap-mixins bootstrap-styles webpack2 webpack-loader twitter-bootstrap webpack sass-loader bootstrap twitterTrim your javascript dependency tree. The quickest way to get started is to generate a Webpack stats file, and then drag and drop it into https://pinterest.github.io/bonsai/analyze.
webpack2 javascript-tools commonjs es6 bonsai webpack tool analyze analyse bundle dependenciesConditioner provides a straight forward Progressive Enhancement based solution for linking JavaScript modules to DOM elements. Modules can be linked based on contextual parameters like viewport size and element visibilty making Conditioner your perfect Responsive Design companion. Mount a component (like a Date Picker, Section Toggler or Carrousel), but only do it on wide viewports and when the user has seen it.
conditioner es6 import responsive amd module-loader mediaqueries webpack browserify requirejs media-queries media-query module dynamic design context conditions shampooNote: 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.
react boilerplate react-boilerplate redux redux-boilerplate webpack2 react-router flow tdd-workflow tdd sentry static-types css-modules sass redux-devtools starter-kit starter-template starter-react es6 hmr hot babel webpack architecture webpack-dev-middleware webpack-hot-middleware starterRollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. It uses the new standardized format for code modules included in the ES6 revision of JavaScript, instead of previous idiosyncratic solutions such as CommonJS and AMD. ES6 modules let you freely and seamlessly combine the most useful individual functions from your favorite libraries. This will eventually be possible natively, but Rollup lets you do it today.Install with npm install --global rollup. Rollup can be used either through a command line interface with an optional configuration file, or else through its JavaScript API. Run rollup --help to see the available options and parameters. The starter project templates, rollup-starter-lib and rollup-starter-app, demonstrate common configuration options, and more detailed instructions are available throughout the user guide.
modules bundler bundling es6 optimizerA 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.
starter-kit boilerplate frontend webpack sass babel es6 startkit webdevCSS 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/.
webpack webpack-loader loader css scss style styles style-loader react reactjs isomorphic universal critical-css critical-path-cssThis module requires a minimum of Node v6.9.0 and Webpack v4.0.0. And run webpack via your preferred method.
webpack-loader webpackWebpack 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.
elm webpack loader
We have large collection of open source products. Follow the tags from
Tag Cloud >>
Open source products are scattered around the web. Please provide information
about the open source projects you own / you use.
Add Projects.