Webpackによるホワイトリストの処理

Question

私は、角度とウェブパックで構築されたWebアプリケーションのメンテナーです。私はWebアプリケーションwhitelabelを可能にすることを任されてきました。実際には、これは、アプリが顧客ごとに異なる外観（CSS /画像）と設定を必要とすることを意味します。

私は、維持できない混乱に陥っていない良い解決策を見つけるのに苦労しています。

webpackを使用してwhitelabel対応のWebアプリケーションを構築している経験は他にありますか？どんな方法論が使われましたか？

Answer 1

gulpのようなランナーを介してwebpackビルドを制御する場合、argsまたは環境変数に基づいてオンザフライで設定を変更することができます。これはと、ビルドごとに変更されますパスのエイリアスを追加するにはwebpack.config.jsでは例

についてなど

CSS /資産ごとに異なるパスをオーバーライドすることができエイリアスを使用できるようになりますいくつかのデフォルトのパス、あなたのCSSの代わりにハードコードされたパスのエイリアスを使用（~手段は、モジュールパスとして扱うと、WebPACKのエイリアスを探します）

@import '~css/some/other/styles.css' 

.blah { 
    background: url('~assets/blah.img') 
} 

で

resolve: { 
    alias: { 
     'assets': path.resolve(__dirname, 'assets') 
     'css': path.resolve(__dirname, 'css') 
    } 
    } 

一気ファイルで

、別名はビルド時に

import gulp from 'gulp' 
import webpack from 'webpack' 
import {argv} from 'yargs' 
import gutil from 'gulp-util' 
import webpackConfig from './webpack.config.js' 

gulp.task('webpack', (cb) => { 
    // clone the original config for safe local manipulation 
    const wpConfig = Object.create(webpackConfig) 
    if (argv.css) wpConfig.resolve.alias.css = argv.css 
    if (argv.assets) wpConfig.resolve.alias.assets = argv.assets 
    return webpack(wpConfig, (err, stats) => { 
    if (err) throw new gutil.PluginError('[webpack]', err) 
    gutil.log('[webpack]', stats.toString({ colors: true })) 
    cb() 
    }) 
}) 

をポイントし、gulp webpack --css client1/css --assets client1/assets

オーバーライドされたパスを渡し、コマンドラインを介して、それを実行パスを変更