在 webpack 中使用 ExtractTextPlugin 忽略 Angular2 组件样式表答案

【问题标题】：Ignore Angular2 component stylesheets with ExtractTextPlugin in webpack在 webpack 中使用 ExtractTextPlugin 忽略 Angular2 组件样式表
【发布时间】：2017-02-15 16:18:06
【问题描述】：

我正在使用html-webpack-plugin 插件将<script> 标签注入到webpack 生成的块的模板文件中。我还有一些全局样式表，我想将它们动态添加到我的 HTML 模板的 <head> 部分。为此，我还使用 html-webpack-plugin 如下（在这种情况下，app entry/chunk 是相关的）。

module.exports = {
    entry: {
        'polyfills': './ts/polyfills.ts',
        'vendor': './ts/vendor.ts',
        'app': './ts/app.ts'
    },

    module: {
        loaders: [
            {
                test: /\.ts$/,
                loaders: ['ts', 'angular2-template-loader']
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.css$/,
                loaders: ['to-string-loader', ExtractTextPlugin.extract('style-loader', 'css-loader')]
            }
        ]
    },

    plugins: [
        new ExtractTextPlugin('css/[name].[contenthash].css'),

        new webpack.ProvidePlugin({
            bootstrap: 'bootstrap'
        }),

        new webpack.optimize.CommonsChunkPlugin({
            name: 'app',
            filename: 'js/[name].[chunkhash].min.js',
            chunks: ['app']
        }),

        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            filename: 'js/[name].[chunkhash].min.js',
            chunks: ['vendor']
        }),

        new webpack.optimize.CommonsChunkPlugin({
            name: 'polyfills',
            filename: 'js/[name].[chunkhash].min.js',
            chunks: ['polyfills']
        }),

        new HtmlWebpackPlugin({
            template: 'my-template.html',
            filename: 'my-template.html',
            inject: 'body',
            hash: false
        }),
    ]
};

下面是app.ts 文件，我在该文件中为要包含在我的模板中的每个样式表添加了require 语句（它们被合并到一个样式表中）。

require('main.css');
require('misc.css');

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

基本上这很好用，但问题是我正在将此配置用于 Angular2 应用程序，该应用程序由可能具有关联样式表的组件组成，如本例所示。

@Component({
    styleUrls: [
        'my-stylesheet.css'
    ]
})
export class MyComponent { ... }

构建应用程序通常会导致对组件的这些样式表进行大量 HTTP 调用，因此为了解决这个问题，我使用 angular2-template-loader 将样式表直接拉入组件中。这个加载器的工作原理如下。

angular2-template-loader 搜索 templateUrl 和 styleUrls Angular 2 组件元数据中的声明并替换带有相应 require 语句的路径。

问题在于，除了添加到 app.ts 入口点的两个样式表之外，webpack 还包含从我的 Angular2 组件引用的每个样式表。因为它遍历了应用程序的依赖，找到了angular2-template-loader添加的require语句。这是不可取的，因为我希望这些样式表对于它们所属的组件是本地的，即在 JS 中内联。

因此，我需要一种方法仅将我require 的样式表直接包含在我的入口点中，或许可以通过某种方式排除组件样式表。问题在于，在这两种情况下，文件都具有.css 扩展名，因此它们都通过了extract-text-plugin 的测试。我查看了加载程序/插件的文档，但找不到任何可以解决我的问题的内容。

所以我想要在我的模板文件中添加一个app.[contenthash].css 文件（这部分有效），但不包括在我的 Angular2 组件中引用的样式表（包括因为 angular2-template-loader )。

如何防止这些 Angular2 组件样式表包含在添加到我的 HTML 模板的样式表中？

【问题讨论】：

标签： angular webpack

【解决方案1】：

假设您有以下文件夹结构：

所以我所有的组件都位于 app 文件夹中。

main.ts

require('main.css');
require('misc.css');

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

/app/app.component.ts

@Component({
  selector: 'my-app',
  template: `<h1>My Angular 2 App</h1>`,
  styleUrls: ['my-stylesheet.css']
})
export class AppComponent {}

那么您的解决方案可能如下所示：

webpack.config.js

{
  test: /\.css$/,
  exclude: /app\\.+\.css$/, <== add this (exclude all styles from app folder)
  loaders: ['to-string-loader', ExtractTextPlugin.extract('style-loader', 'css-loader')]
},
{
  test: /app\\.+\.css$/,
  loader: 'raw'  <== use raw loader for these files
}

【讨论】：

啊，看起来不错！我会尽快给它一个旋转，让你知道它是怎么回事。谢谢！
我试过玩这个，但无法让它工作。首先，我的 CSS 文件位于 public/css，其中组件的样式表位于 public/css/components/**/*.css。我尝试在第一个加载程序中排除/public\/css\/components/，并在第二个加载程序中使用raw，以及许多不同的测试和排除，以及各种不同的错误。我不确定我是否弄乱了路径/正则表达式或问题是什么。如果你能提供一个前面提到的路径的例子，那真的很棒，因为我似乎无法让它工作。
试试/public\\css\\components/ 或/css\\components/
在尝试了很多组合之后，我设法让它发挥作用。虽然我没有完全按照你的建议成功，但它已经足够接近让我走上正确的轨道，所以非常感谢！我已经为可能需要它的任何人添加了我的解决方案的答案。干杯！

【解决方案2】：

您可以通过使用两个单独的名称模式来给 webpack 一个提示来区分 CSS 文件。假设您将 angular2-template-loader 应该包含的所有文件命名为后缀 .tl（模板加载器的缩写，例如 mycss.tl.css），而其他文件的后缀为 .pt（平台的缩写，例如 main.pt.css） , 然后你可以编写 webpack 配置如下：

module: {
        loaders: [
            {
                test: /\.ts$/,
                loaders: ['ts', 'angular2-template-loader']
            },
            {
                test: /\.pt\.css$/,
                loaders: ['to-string-loader', ExtractTextPlugin.extract('style-loader', 'css-loader')]
            },
            {
                test: /\.tl\.css$/,
                loaders: ['style-loader', 'css-loader']
            }
        ]
    }

您的组件定义如下所示

@Component({
    styleUrls: [
        'my-stylesheet.tl.css'
    ]
})
export class MyComponent { ... }

而在 app.ts 你放置

require('main.pt.css');
require('misc.pt.css');

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

angular2-template-loader 然后仍然使用 require 调用包装 css 路径，但根据您的配置，您可以为 css 文件使用一组不同的加载器。

【讨论】：

我实际上是在考虑做这样的事情，但在我的脑海中这似乎是一个 hack，所以我想知道是否有更好的解决方案。我会玩一下它，看看我能想出什么。谢谢您的回答！ :-)

【解决方案3】：

对于任何感兴趣的人，在@yurzui 的回答的启发下，我确实设法解决了这个问题。

module: {
    loaders: [
        {
            test: /\.ts$/,
            loaders: ['ts', 'angular2-template-loader']
        },
        {
            test: /\.css$/,
            exclude: [helpers.root('public', 'css', 'components')],
            loaders: ['to-string-loader', ExtractTextPlugin.extract('style-loader', 'css-loader')]
        },
        {
            test: /\.css$/,
            include: [helpers.root('public', 'css', 'components')],
            loaders: ['raw-loader']
        }
    ]
}

在上面的示例中，我使用我的自定义助手来组装目录的路径。你可以以其他方式做到这一点，但无论如何这里是我的助手（取自 Angular2 的文档）。

var path = require('path');
var _root = path.resolve(__dirname, '..'); // This file is stored within a webpack subdirectory in my case

function root(args) {
    args = Array.prototype.slice.call(arguments, 0);
    return path.join.apply(path, [_root].concat(args));
}

exports.root = root;

要使用它，只需在你的 webpack 配置中要求它。

var helpers = require('./helpers');

我希望这对某人有所帮助。

【讨论】：