All Projects → webpack-contrib → Closure Webpack Plugin

webpack-contrib / Closure Webpack Plugin

Licence: mit
Webpack Google Closure Compiler and Closure Library plugin -

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Closure Webpack Plugin

Esbuild Loader
⚡️ Speed up your Webpack build with esbuild
Stars: ✭ 1,245 (+217.6%)
Mutual labels:  webpack, optimization
Tris Webpack Boilerplate
A Webpack boilerplate for static websites that has all the necessary modern tools and optimizations built-in. Score a perfect 10/10 on performance.
Stars: ✭ 1,016 (+159.18%)
Mutual labels:  webpack, optimization
Serverless Plugin Webpack
Serverless Plugin Webpack
Stars: ✭ 72 (-81.63%)
Mutual labels:  webpack, optimization
Auxpack
A dashboard for monitoring Webpack build stats.
Stars: ✭ 86 (-78.06%)
Mutual labels:  webpack, optimization
Webpack Conditional Loader
C conditionals directive for JavaScript
Stars: ✭ 93 (-76.28%)
Mutual labels:  webpack, optimization
Webpackmonitor
A tool for monitoring webpack optimization metrics through the development process
Stars: ✭ 2,432 (+520.41%)
Mutual labels:  webpack, optimization
Snappy
snAppy is a VS Code extension coupled with an interactive view to support your React front-end delivery.
Stars: ✭ 144 (-63.27%)
Mutual labels:  webpack, optimization
Multipages Generator
🥇 generator for multiple pages webpack application
Stars: ✭ 354 (-9.69%)
Mutual labels:  webpack, optimization
Ykit
基于 Webpack 的灵活快速的打包工具,帮助稳定高效构建现代 JavaScript 应用。
Stars: ✭ 375 (-4.34%)
Mutual labels:  webpack
React Shopping Cart
Easily integrate React Shopping Cart into your existing website without using Redux.
Stars: ✭ 380 (-3.06%)
Mutual labels:  webpack
Mocker Api
mocker-api that creates mocks for REST APIs. It will be helpful when you try to test your application without the actual REST API server.
Stars: ✭ 374 (-4.59%)
Mutual labels:  webpack
Awesome Wp Speed Up
Plugins and resources to speed up and optimize your WordPress site.
Stars: ✭ 375 (-4.34%)
Mutual labels:  optimization
Preact Starter
Webpack3 boilerplate for building SPA / PWA / offline front-end apps with Preact
Stars: ✭ 384 (-2.04%)
Mutual labels:  webpack
React Hot Redux Firebase Starter
🌋 React + Redux + Firebase + Webpack + React Hot Loader 3 + React Router in one boilerplate
Stars: ✭ 375 (-4.34%)
Mutual labels:  webpack
Burnside
Fast and Reliable E2E Web Testing with only Javascript
Stars: ✭ 389 (-0.77%)
Mutual labels:  webpack
Alloy
Boilerplate for creating web applications in Go (golang)
Stars: ✭ 374 (-4.59%)
Mutual labels:  webpack
Miox
Modern infrastructure of complex SPA
Stars: ✭ 374 (-4.59%)
Mutual labels:  webpack
Pandapower
Convenient Power System Modelling and Analysis based on PYPOWER and pandas
Stars: ✭ 387 (-1.28%)
Mutual labels:  optimization
Onelog
Dead simple, super fast, zero allocation and modular logger for Golang
Stars: ✭ 389 (-0.77%)
Mutual labels:  optimization
Generator Jhipster
JHipster is a development platform to quickly generate, develop, & deploy modern web applications & microservice architectures.
Stars: ✭ 19,162 (+4788.27%)
Mutual labels:  webpack

closure-webpack-plugin

npm version

This plugin supports the use of Google's Closure Tools with webpack.

Note: This is the webpack 4 branch.

Closure-Compiler is a full optimizing compiler and transpiler. It offers unmatched optimizations, provides type checking and can easily target transpilation to different versions of ECMASCRIPT.

Closure-Library is a utility library designed for full compatibility with Closure-Compiler.

Older Versions

For webpack 3 support, see https://github.com/webpack-contrib/closure-webpack-plugin/tree/webpack-3

Install

You must install both the google-closure-compiler package as well as the closure-webpack-plugin.

npm install --save-dev closure-webpack-plugin google-closure-compiler

Usage example

const ClosurePlugin = require('closure-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new ClosurePlugin({mode: 'STANDARD'}, {
        // compiler flags here
        //
        // for debugging help, try these:
        //
        // formatting: 'PRETTY_PRINT'
        // debug: true,
        // renaming: false
      })
    ]
  }
};

Options

  • platform - native, java or javascript. Controls which version to use of closure-compiler. By default the plugin will attempt to automatically choose the fastest option available.
    • JAVASCRIPT does not require the JVM to be installed. Not all flags are supported.
    • JAVA utilizes the jvm. Utilizes multiple threads for parsing and results in faster compilation for large builds.
    • NATIVE only available on linux or MacOS. Faster compilation times without requiring a JVM.
  • mode - STANDARD (default) or AGGRESSIVE_BUNDLE. Controls how the plugin utilizes the compiler.
    • STANDARD mode, closure-compiler is used as a direct replacement for other minifiers as well as most Babel transformations.
    • AGGRESSIVE_BUNDLE mode, the compiler performs additional optimizations of modules to produce a much smaller file
  • childCompilations - boolean or function. Defaults to false. In order to decrease build times, this plugin by default only operates on the main compilation. Plugins such as extract-text-plugin and html-webpack-plugin run as child compilations and usually do not need transpilation or minification. You can enable this for all child compilations by setting this option to true. For specific control, the option can be set to a function which will be passed a compilation object.
    Example: function(compilation) { return /html-webpack/.test(compilation.name); }.
  • output - An object with either filename or chunkfilename properties. Used to override the output file naming for a particular compilation. See https://webpack.js.org/configuration/output/ for details.
  • test - An optional string or regular expression to determine whether a chunk is included in the compilation
  • extraCommandArgs - Optional string or Array of strings to pass to the google-closure-compiler plugin. Can be used to pass flags to the java process.

Compiler Flags

The plugin controls several compiler flags. The following flags should not be used in any mode:

  • module_resolution
  • output_wrapper
  • dependency_mode
  • create_source_map
  • module
  • entry_point

Aggressive Bundle Mode

In this mode, the compiler rewrites CommonJS modules and hoists require calls. Some modules are not compatible with this type of rewriting. In particular, hoisting will cause the following code to execute out of order:

const foo = require('foo');
addPolyfillToFoo(foo);
const bar = require('bar');

Aggressive Bundle Mode utilizes a custom runtime in which modules within a chunk file are all included in the same scope. This avoids the cost of small modules.

In Aggressive Bundle Mode, a file can only appear in a single output chunk. Use the Split Chunks Plugin to split duplicated files into a single output chunk. If a module is utilized by more than one chunk, the plugin will move it up to the first common parent to prevent code duplication.

The concatenatedModules optimization is not compatible with this mode since Closure-Compiler performs an equivalent optimization). The plugin will emit a warning if this optimization is not disabled.

Multiple Output Languages

You can add the plugin multiple times. This easily allows you to target multiple output languages. Use ECMASCRIPT_2015 for modern browsers and ECMASCRIPT5 for older browsers.

Use the output option to change the filenames of specific plugin instances.

Use <script type="module" src="es6_out_path.js"> to target modern browsers and <script nomodule src="es5_out_path.js"> for older browsers.

See the es5 and es6 output demo for an example.

Other tips for Use

  • Don't use babel at the same time - closure-compiler is also a transpiler. If you need features not yet supported by closure-compiler, have babel only target those features. Closure Compiler can transpile async/await - you don't need babel for that functionality either.

Closure Library Plugin

In order for webpack to recognize goog.require, goog.provide, goog.module and related primitives, a separate plugin is shipped.

const ClosurePlugin = require('closure-webpack-plugin');

module.exports = {
  plugins: [
    new ClosurePlugin.LibraryPlugin({
      closureLibraryBase: require.resolve(
        'google-closure-library/closure/goog/base'
      ),
      deps: [
        require.resolve('google-closure-library/closure/goog/deps'),
        './public/deps.js',
      ],
    })
  ]
};

The plugin adds extra functionality to support using Closure Library without Closure Compiler. This is typically used during development mode. When the webpack mode is production, only dependency information is provided to webpack as Closure Compiler will natively recognize the Closure Library primitives.

The Closure Library Plugin is only compatible with the AGGRESSIVE_BUNDLE mode of the Closure-Compiler webpack plugin.

Options

  • closureLibraryBase - (optional) string. Path to the base.js file in Closure-Library.
  • deps - (optional) string or Array. Closures style dependency mappings. Typically generated by the depswriter.py script included with Closure-Library.
  • extraDeps - (optional) Object. Mapping of namespace to file path for closure-library provided namespaces.

Maintainers

Chad Killingsworth Joshua Wiens
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].