2017-07-08 17 views
1

私はリアクションアプリケーションでfirebaseを使用しています。私はfirebase/appfirebase/databaseのモジュールしか使っていないので、webpackに私が使ったものだけをバンドルします。しかし、webpackはfirebaseモジュールのすべてをバンドルしています。 webpackに他のモジュールを無視するように指示する方法を理解できません。webpackのみfirebase/databaseをバンドルし、firebase/authをバンドルしません

私は私の問題は

import * as firebase from 'firebase'; 

だと思った。しかし、私はfirebaseの唯一のこまごまとをインポートしようとしました。

import firebase from 'firebase/app'; 
import firebase from 'firebase/database'; 

しかし、WebPACKのはまだauth.jsおよびその他の未使用のモジュールをバンドルしています。

webpack bundle analyzer

は、ここに私のWebPACKの設定ファイルです。

const path = require('path'); 
const webpack = require('webpack'); 
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin'); 
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; 

module.exports = { 
    cache: true, 
    entry: { 
     main: "./src/swap.tsx", 
     vendor: [ 
     'babel-polyfill', 
     'events', 
     'fbemitter', 
     'flux', 
     'react', 
     'react-dom' 
     ] 
    }, 
    output: { 
     filename: "[name].js", 
     path: __dirname + "/app/assets/javascripts", 
     chunkFilename: '[chunkhash].js' 
    }, 
    resolve: { 
     extensions: [".ts", ".tsx", ".js", ".jsx"], 
     modules: [ 
      path.resolve(__dirname, 'src'), 
      path.resolve(__dirname, 'node_modules') 
     ] 
    }, 
    module: { 
     rules: [{ 
     test: /\.ts(x?)$/, 
     exclude: /node_modules/, 
     use: [ 
      { loader: 'babel-loader' }, 
      { loader: 'awesome-typescript-loader' } 
     ] 
     } 
    }, 
    plugins: [ 
     new webpack.DefinePlugin({ 
     'process.env': { 
      NODE_ENV: JSON.stringify('production') 
     } 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ 
     name: 'vendor', 
     filename: 'vendor.js' 
     }), 
     new webpack.optimize.UglifyJsPlugin(), 
     new LodashModuleReplacementPlugin(), 
     new BundleAnalyzerPlugin(), 
    ] 
}; 

答えて

1

ベンダーバンドルアレイにfirebase/appfirebase/databaseを追加

関連する問題