1
私はリアクションアプリケーションでfirebaseを使用しています。私はfirebase/app
とfirebase/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の設定ファイルです。
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(),
]
};