ExtractTextPlugin不适用于Angular AOT构建

Question

所以我试图用AOT构建创建一个Angular（ 4.4.4 ）Webpack（ 3.6.0 ）入门程序，并且遇到将CSS提取到单独的包中的问题（使用extract-text-webpack-plugin 3.0.1 ）。

当我运行产品构建时，webpack构建会陷入95% emitting 。 它永远不会达到100％，也永远不会输出dist捆绑包。 最初，我尝试使用style-loader （ 0.19.0 ）创建内联CSS，但这并不成功，因为Angular AOT构建在构建过程中没有窗口对象（sass-loader在这一点上会失败）。 因此，在生产期间我被迫将CSS提取到单独的包中（一点也不坏）。

但是以某种方式，编译器会停顿并且永远不会给出错误。

webpack.common.js

module.exports = {
    entry: {
        app: './src/main.ts',
        vendor: getVendorPackages()
    },
    output: {
        path: __dirname + '/dist',
        filename: "website.bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.html$/,
                loader: 'html-loader'
            }
        ]
    },
    plugins: [
        new webpack.ContextReplacementPlugin( //Resolve Angular warnings
            /angular(\\|\/)core(\\|\/)@angular/,
            path.resolve(__dirname, '../src')
        ),
        new webpack.optimize.CommonsChunkPlugin({ //Create secondary bundle containing dependencies
            name: 'vendor',
            filename: 'vendor.bundle.js',
            minChunks(module) {
                const context = module.context;
                return context && context.indexOf('node_modules') >= 0;
            },
        }),
        new htmlWebpackPlugin({ //Generate index.html
            template: './src/index.html'
        }),
        new webpack.ContextReplacementPlugin( //Only export the locals we need | https://github.com/moment/moment/issues/2517
            /moment[\/\\]locale$/, /en|nl/
        )
    ],
    resolve: {
        extensions: ['.js', '.ts', '.scss']
    }
};

Webpack.prod.js

module.exports = merge(common, {
    module: {
        rules: [
            {
                test: /\.ts$/,
                loaders: ['@ngtools/webpack']
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({ // Fallback is not necessary, since style-loader will fail with AOT build
                    use: ["css-loader", "sass-loader"]
                })
            }
        ]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({ // Uglyfy the JavaScript output
            beautify: false,
            mangle: {
                screw_ie8: true,
                keep_fnames: true
            },
            compress: {
                warnings: false,
                screw_ie8: true
            },
            comments: false
        }),
        new AotPlugin({ // Create AOT build
            tsConfigPath: './tsconfig.json',
            entryModule: __dirname + '/src/app/app.module#AppModule'
        }),
        new webpack.DefinePlugin({ // Set the node env so that the project knows what to enable or disable
            'process.env': {
                'NODE_ENV': JSON.stringify('production')
            }
        }),
        new ExtractTextPlugin("styles.css") //Create an external style bundle
    ]
});

---

对于prod构建，我正在运行以下npm任务： "build --prod": "webpack -p --config webpack.prod.js --progress"

我的package.json依赖关系如下所示：

"dependencies": {
    "@angular/common": "4.4.4",
    "@angular/compiler": "4.4.4",
    "@angular/core": "4.4.4",
    "@angular/forms": "4.4.4",
    "@angular/http": "4.4.4",
    "@angular/platform-browser": "4.4.4",
    "@angular/platform-browser-dynamic": "4.4.4",
    "@angular/router": "4.4.4",
    "core-js": "2.5.1",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.4.3",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@angular/compiler-cli": "4.4.4",
    "@ngtools/webpack": "1.7.2",
    "@types/core-js": "0.9.43",
    "@types/node": "8.0.31",
    "angular2-template-loader": "0.6.2",
    "awesome-typescript-loader": "3.2.3",
    "codelyzer": "3.2.0",
    "css-loader": "0.28.7",
    "extract-text-webpack-plugin": "3.0.1",
    "html-loader": "0.5.1",
    "html-webpack-plugin": "2.30.1",
    "node-sass": "4.5.3",
    "sass-loader": "6.0.6",
    "style-loader": "0.19.0",
    "tslint": "5.7.0",
    "typescript": "2.5.3",
    "webpack": "3.6.0",
    "webpack-bundle-analyzer": "2.9.0",
    "webpack-dev-server": "2.9.1",
    "webpack-merge": "4.1.0"
  }

我的Angular组件如下：

@Component({
    selector: 'hn-root',
    templateUrl: './app.html',
    styleUrls: ['./app.scss'],
})
export class AppComponent {
}

我的项目结构是：

- src
  -- app
     -- app.component.ts
     -- app.html
     -- app.module.ts
     -- app.scss
  index.html
  main.ts

有人知道我在做什么错吗？

Answer 1

在阅读了有关Angular中的视图封装的更多信息之后，我现在知道您不应该将style-loader与Angular一起使用。

如果要具有全局样式，可以使用Style-loader ，但如果要仅将样式应用于包含它们的组件，则应使用raw-loader 。

因此，在添加了原始加载器（ npm install --save-dev raw-loader ）之后，我将webpack.prod.js更改为：

module.exports = merge(common, {
    module: {
        rules: [
            {
                test: /\.ts$/,
                loaders: ['@ngtools/webpack']
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                loaders: ['raw-loader', 'sass-loader']
            }
        ]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({ // Uglyfy the JavaScript output
            beautify: false,
            mangle: {
                screw_ie8: true,
                keep_fnames: true
            },
            compress: {
                warnings: false,
                screw_ie8: true
            },
            comments: false
        }),
        new AotPlugin({ // Create AOT build
            tsConfigPath: './tsconfig.json',
            entryModule: __dirname + '/src/app/app.module#AppModule'
        }),
        new webpack.DefinePlugin({ // Set the node env so that the project knows what to enable or disable
            'process.env': {
                'NODE_ENV': JSON.stringify('production')
            }
        })
    ]
});

这样，我可以像Angular推荐的那样使用视图封装（这也是angular-cli的工作方式）。

资料来源：

Github-AngularClass

Github-角启动器