Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including lodash-ts-webpack-plugin with all npm packages installed. Try it out:

require("typescript/package.json"); // typescript is a peer dependency. require("webpack/package.json"); // webpack is a peer dependency. var lodashTsWebpackPlugin = require("lodash-ts-webpack-plugin")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

lodash-ts-webpack-plugin v1.1.4

Transforms lodash function imports into sub-modules imports, which allows for a tree-shaking

Jump to

Overview

[jump to TOC]

Transforms lodash function imports into sub-modules imports, which allows for a tree-shaking.

It transforms from:

import { debounce } from 'lodash';

to:

import debounce from 'lodash/debounce';

before the source code is being taken through the typescript compiler.

This way webpack 2 will be able to only include the code that's being actually used.

Installation

[jump to TOC]

  1. Install the package:
$ npm install lodash-ts-webpack-plugin --save-dev

Usage

[jump to TOC]

In your webpack.config.js add the lodash-ts-webpack-plugin preloader:

// ...
module: {
    rules: [
        {
            test: /\.ts$/,
            loader: 'lodash-ts-webpack-plugin',
            exclude: /node_modules/,
            enforce: 'pre'
        },
        // ...
    ],
    // ...
}
// ...

Now somewhere in your main.ts typescript file add an ES6 import for lodash:

import { debounce } from 'lodash';
// make sure you have this line as well otherwise you're not using the import member
// and the lodash code will not be included in the bundle
console.log(debounce); 

run webpack bundling and check your bundle size.

Update the code to:

import { debounce, zip } from 'lodash';
// make sure you have this lines as well otherwise you're not using the import members
// and the lodash code will not be included in the bundle
console.log(debounce); 
console.log(zip); 

run webpack bundling and check your bundle size.
This time the bundle size should be larger.

Links

[jump to TOC]

NPM:
https://www.npmjs.com/package/lodash-ts-webpack-plugin
GITHUB:
https://github.com/impankratov/lodash-ts-webpack-plugin.git

Authors

[jump to TOC]

Eduard Fidiles

Ivan Pankratov

License

[jump to TOC]
Released under the MIT license.

Copyright © 2017, Eduard Fidiles, Ivan Pankratov

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free