7

現在、さまざまなフロントエンド テーマを使用するアプリケーションを開発しています。これらのテーマは、ユーザーが選択できる単純な CSS ファイルです。

技術的には、これらのテーマは .scss ファイルであり、webpack によってコンパイルされ、angular の標準的なリンク タグを介してロードされます。

<link rel="stylesheet", ng-href="themes/{{theme}}.css">

削除された webpack 構成は次のようになります。

theme1CssExtractor = new ExtractTextPlugin('themes/theme-1.css'),     
theme2CssExtractor = new ExtractTextPlugin('themes/theme-2.css'),     

module.exports = new WebpackConfig().merge({

entry: {
    app: [
        './app/main.ts',
        './assets/sass/themes/theme-1.scss',
        './assets/sass/themes/theme-2.scss'
    ],
},

output: {
    path: "build/",
    filename: "[name].bundle.js",
    publicPath: "/build/"
},

plugins: [
    theme1CssExtractor,
    theme2CssExtractor,
],

module: {
    loaders: [
        {
            test: /\.ts$/,
            loaders: ['awesome-typescript-loader']
        },
        [
            {
                test: /theme-1\.scss$/,
                include: path.resolve(__dirname, "assets/sass/themes"),
                loader: theme1CssExtractor.extract(
                    "style",
                    "css!sass?includePaths[]=" + path.resolve(__dirname, './node_modules/compass-mixins/lib')
                )
            },
            {
                test: /theme-2\.scss$/,
                include: path.resolve(__dirname, "assets/sass/themes"),
                loader: theme2CssExtractor.extract(
                    "style",
                    "css!sass?includePaths[]=" + path.resolve(__dirname, './node_modules/compass-mixins/lib')
                )
            }
        ]
    ]
}

extractTextPlugin は HMR をサポートしていないため、ホット モジュール交換 (HMR) 機能を有効にして webpack-dev-server を使用するまで、これは完全に正常に機能します。単純に extractTextPlugin (options.disable) を無効にするか、それらを削除すると、すべてのテーマがメイン モジュールにコンパイルされます。もちろん、すべてが一緒に適用されるため、テーマが壊れます。

extractTextPlugin を使用せずにこれらの CSS ファイルを webpack で直接生成するにはどうすればよいですか? さまざまなエントリ/チャンク、ファイルローダーなどでさまざまな試みを試みましたが、実際には何も機能しません。

簡単にする必要があります。ExtractTextPlugin を使用せずに、SCSS ファイルから静的 CSS ファイルを JS ファイルに変換せずに生成します。

誰かが私を正しい方向に向けることができれば、それは素晴らしいことです.

4

1 に答える 1

2

1 つのアプローチは、さまざまなモードを尊重する方法で Webpack 構成を整理することです。

  • 開発: ExtractTextPlugin を使用しないでください (すべてを含む 1 つのファイルの問題については後述します)。
  • production: 今と同じように ExtractTextPlugin を使用してください

esteでそれがどのように行われるかを見てみましょう。

ExtractTextPlugin (すべてのテーマを含む 1 つのファイル) なしで発生する問題について: 構成にtheme-1.scssとの両方theme-2.scssが 'app' チャンクのエントリ ポイントとして含まれているために発生するため、Webpack はそれらをまとめます (1 つのチャンク)。別の方法を試すこともできます。それらをエントリ ポイントのリストから除外し、ソース コードに次のようなものを追加します。

require('../assets/sass/themes/' + theme + '.scss');

この場合、開発モードでは、変数「テーマ」の値に応じて、1 つのモジュール (テーマ) のみが読み込まれます。また、本番モードでは、Webpack は「assets/sass/themes/」(「require」に式が含まれている場合の特定の Webpack の動作) 内のすべてのファイルを調べて、それらをモジュールとして含め、ExtractTextPlugin がそれらの抽出を処理します (したがって、ここで何でもする）。

本番環境で特定のテーマがどのようにロードされるかについては、いくつかのトリッキーな部分があります (コード内の「require」は何もしないため、ExtractTextPlugin は対応するモジュールを空のままにするため) <link>。<head>あなたのHTMLの。同時に、このコードを開発モードで呼び出すべきではありません。それを達成するのに役立つ1つの汚いハック：

if (!__DEV__) {
  // do adding <link> to the <head>
}

(変数を定義するために DefinePlugin を使用する方法については、este の例も参照してください__DEV__)。

どうすればより良い方法で解決できるのか、本当に興味があります...

于 2015-10-30T00:23:39.283 に答える