Webpack achieves several ways to pack LODASH on demand

When the data operation, Lodash is my ammunition depot, and some functions can be easily dismantled regardless of the multi-complex data structure.

ES6 has also added a number of new object functions, and ES6 in some simple items is sufficient, but there will be exceptions to reference a few Lodash functions. A complete Lodash library, even after compression, the latest version is also a volume of 71K. I can’t buy a restaurant in order to eat a meal.

In response to this problem, there is already a lot of options.

Function module Each function in Lodash has a separate publishing module in NPM. NPM: Results For ‘Lodash’


If you only need to use _.isequal, you only need to install

Lodash.isequal

module, then reference it as follows.

VAR ISEQUAL = Require (‘Lodash.isequal’) // OR ES6IMPORT ISEQUAL from ‘Lodash.isequal’iSequal ([1, 2, 3], [1, 2, 3]) // true
 full path reference   
After you complete the LODASH, you can press the LODSH / function The format of the name is separately introduced into the required function module.

VAR DIFCERENCE = Require (‘Lodash / Difference’) // OR ES6IMPORT DIFERENCE FROM ‘LODSH / DIFCERENCE’DIFERENCE ([1, 2], [1, 3]) // [2]

Using insert optimization

Under simple scenery, The above two ways are enough to solve the problem.
 When encountering complex data objects, we have to introduce multiple Lodash functions in a file, which needs to write multiple requests or Import related functions in the file.   
Import Remove from ‘Lodash / Remove’Import Uniq from’ Lodash / Uniq’Import Invokemap from ‘Lodash / Invokemap’Import Sortby from’ Lodash / Sortby ‘// More …

Who is writing to the critical, but because the introduction of a function is to pull to the file header to define the reference, it is very uncomfortable!

So I went to Github to search for the combination of WebPack and Lodash keywords, and the first lodash-webpack-plugin was born to solve this problem.


The following modules are required, in fact, in addition to the top two remaining generally installed:

$ npm i -s lodash -webPack- Plugin Babel-Plugin-Lodash Babel-Core Babel-Loader Babel-PRESET-ES2015 WebPack
   Configuration: 

Webpack.config.jsvar LodashModulerePlacementPlugin = Require (‘lodash-webpack-plugin “; var webpack = required; module.exports = {module: {loadingers: [{loader:’ Babel ‘, Test: /\.js $/, exclude: / node_modules /, query: {plugins: [ ‘transform-runtime’, ‘lodash’], presets: [ ‘es2015’]}}]}, plugins: [new LodashModuleReplacementPlugin, new webpack.optimize.OccurrenceOrderPlugin, new webpack .optimize.uglifyjsplugin]}

Where the Babel-Plugin-Lodash configuration is

plugins: [‘Lodash’]
, is not necessarily In Loaders, Babel can also be individually defined.
  WebPack.config.jsvar LodashModuleReplacementPlugin = Require ('lodash-webpack-plugin "; var webpack = request (' WebPack '); Module.Exports = {Module: {Loaders: [{loader: 'Babel', Test: /\.js $/, Exclude: / Node_Modules /}]}, Babel: {PRESets: [ 'es2015'], plugins: [ 'transform-runtime', 'lodash']}, plugins: [new LodashModuleReplacementPlugin, new webpack.optimize.OccurrenceOrderPlugin, new webpack.optimize.UglifyJsPlugin]}  
or in the .babelrc file.

The above work is completed, in each file you need to use the Lodash function, you only need to reference the lodash, you can call any function without packet.

Import _ from ‘lodash’ _. Add (1, 2) // Package only this function module
   
Note: You must use the module reference method of ES2015 to be valid.

The above is what I have learned. If a friend has a better way (for example, only the overall introduction), please share with me!

Summary
 The above is the full content of this article, I hope this paper will bring a certain help to everyone's learning or work. If you have any questions, you can leave a message, thank you for tumi Cloud support.   
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment