Question

所以我试图用AOT构建创建一个Angular（4.4.4）Webpack（3.6.0）启动器，我遇到了一个问题，即将css提取到一个单独的包中（使用extract-text -webpack-plugin 3.0.1）。

当我运行我的prod构建时，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中的视图封装的更多内容后，我现在知道你不应该使用带有Angular的style-loader。

如果你想拥有全局样式，

Style-loader很不错，但是如果你想要的样式只应用于包含它们的组件，那么你应该使用raw-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 - Angular starter

ExtractTextPlugin不适用于Angular AOT构建

1 个答案: