如何從木偶3應用程序中使用的WebPack 2

我與未來的依賴如何從木偶3應用程序中使用的WebPack 2

"dependencies": { 
    "backbone": "^1.3.3", 
    "backbone.marionette": "^3.1.0", 
    "jquery": "^3.1.1", 
    "lodash": "^4.17.4" 
}, 
"devDependencies": { 
    "babel-core": "^6.22.1", 
    "babel-loader": "^6.2.10", 
    "babel-preset-env": "^1.1.8", 
    "webpack": "^2.2" 
}

一個虛擬應用程序，像

{ 
    entry: { 
    app: './empty-file.js', 
    vendor: ['backbone.marionette'] 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.(js)$/, 
     use: 'babel-loader' 
     } 
    ] 
    }, 
    resolve: { 
    extensions: ['.js'], 
    alias: { 
     underscore: 'lodash' 
    } 
    }, 
    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin('vendor') 
    ],

當東西webpack.config.js排除lodash的未使用部分我正在運行webpack，我正在捆綁整個lodash庫。這是巨大的，比其他所有組合都大。據我所知，這是Marionette製造類似import _ from 'lodash'的東西。有沒有辦法刪除不需要的lodash部分？

來源

2017-02-12 antejan

您可以使用babel-plugin-lodash刪除不需要的部分。

以前

import _ from 'lodash'; 
import { add } from 'lodash/fp'; 

const addOne = add(1); 
_.map([1, 2, 3], addOne);

後

import _add from 'lodash/fp/add'; 
import _map from 'lodash/map'; 

const addOne = _add(1); 
_map([1, 2, 3], addOne);

來源

2017-02-14 17:45:20

謝謝你的建議，看起來像大多數情況下，一個很好的選擇。不幸的是插件的一個要求是「您必須使用ES2015導入來加載Lodash」，但據我瞭解，Marionette使用commonjs'require'導入下劃線/ lodash http://marionettejs.com/annotated-src/backbone.marionette。 html – antejan

源代碼使用ES2015導入：https：//github.com/marionettejs/backbone.marionette/blob/master/src/backbone.marionette.js文檔中的代碼可能不是最新的。 –

嗯，有趣！他們提供的編譯文件爲「main」，並且從'.npmignore'文件的軟件包中排除src文件夾。即使我將github url作爲依賴關係，npm會在沒有src的情況下下載它。 – antejan

如何從木偶3應用程序中使用的WebPack 2

回答

相關問題