ExtractTextPlugin不適用於角AOT構建

Question

所以我想創建一個Angular（4.4.4）Webpack（3.6.0）初學者與AOT構建，我遇到了一個問題，提取到一個單獨的捆綁的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 
    ] 
}); 

---

對於我運行下面的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" 
    } 

我角度成分如下：

@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。

所以添加原裝載機（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') 
      } 
     }) 
    ] 
}); 

這樣我可以使用視圖封裝像角建議（這也是如何角-cli做到了）。

來源：

Github - AngularClass

Github - Angular starter