Question

我正在使用Angular模板运行使用VS 2017创建的Angular单页面应用程序。默认情况下使用Webpack。我在调用应用程序时从服务器获得的响应是：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home Page - CoBrand3Step</title>
    <base href="/" />

    <link rel="stylesheet" href="/dist/vendor.css?v=GTBoa19X9IFhaihx7ZAnVru_FAmBl9DrU8hiEInbZsk" />
    <script type="text/javascript">
        var appInsights=window.appInsights||function(config){
            function i(config){t[config]=function(){var i=arguments;t.queue.push(function(){t[config].apply(t,i)})}}var t={config:config},u=document,e=window,o="script",s="AuthenticatedUserContext",h="start",c="stop",l="Track",a=l+"Event",v=l+"Page",y=u.createElement(o),r,f;y.src=config.url||"https://az416426.vo.msecnd.net/scripts/a/ai.0.js";u.getElementsByTagName(o)[0].parentNode.appendChild(y);try{t.cookie=u.cookie}catch(p){}for(t.queue=[],t.version="1.0",r=["Event","Exception","Metric","PageView","Trace","Dependency"];r.length;)i("track"+r.pop());return i("set"+s),i("clear"+s),i(h+a),i(c+a),i(h+v),i(c+v),i("flush"),config.disableExceptionTracking||(r="onerror",i("_"+r),f=e[r],e[r]=function(config,i,u,e,o){var s=f&&f(config,i,u,e,o);return s!==!0&&t["_"+r](config,i,u,e,o),s}),t
        }({
            instrumentationKey: 'ba5fc891-eb8c-4a6d-9126-d79556ae0863'
        });

        window.appInsights=appInsights;
        appInsights.trackPageView();

    </script>
</head>
<body>

<app></app>

<script src="/dist/vendor.js?v=ktEYx3Pf8jICUgoPuQqu7uGMM9Su7Hv398WJvv9P2o4"></script>



    <script src="/dist/main-client.js"></script>

</body>
</html>

让我们专注于vendor.css。我知道如何创建它，但我想知道它是如何包含在这个初始Html响应中的。其他一些项目在初始响应中不包含它。 How to tell app to include it anyway? webpack.config.vendor.js的一部分如下：

module.exports = (env) => {
    const extractCSS = new ExtractTextPlugin("vendor.css");
...
const clientBundleConfig = merge(sharedConfig, {
        entry: {
            // To keep development builds fast, include all vendor dependencies in the vendor bundle.
            // But for production builds, leave the tree-shakable ones out so the AOT compiler can produce a smaller bundle.
            vendor: isDevBuild ? allModules : nonTreeShakableModules
        },
        output: { path: path.join(__dirname, "wwwroot", "dist") },
        module: {
            rules: [
                { test: /\.css(\?|$)/, use: extractCSS.extract({ use: isDevBuild ? "css-loader" : "css-loader?minimize" }) },
            ]
        },
        plugins: [
            extractCSS,
            new webpack.DllPlugin({
                path: path.join(__dirname, "wwwroot", "dist", "[name]-manifest.json"),
                name: "[name]_[hash]"
            })

Answer 1

你可以在nonTreeShakableModules中包含一个css文件（在webpack.config.vendor中）

e.g。如果你想包括bootstrap.css和font-awesome

const nonTreeShakableModules = [
    'bootstrap-css-only/css/bootstrap.css',
    'font-awesome/css/font-awesome.css',
    ...
];

在控制台中更改webpack.config.vendor之后不要忘记执行：

 webpack --config webpack.config.vendor.js

重写vendor.css

将css嵌入到Angular初始HTML中

1 个答案: