How to use Webpack to build Angular components?

[bahmutov]

Without redefining everything manually?

Seems like node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/test.js is a good candidate for grabbing the webpack configuration

[bahmutov]

Alternative: try to use custom webpack config

@Component({
  selector: 'app-hero-detail',
  // using template string works
  // template: '',
  // using templateUrl does not work
  templateUrl: './hero-detail.component.html',
  styleUrls: [ './hero-detail.component.css' ]
})

The webpack config

const webpackOptions = {
  resolve: {
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [{
          loader: 'ts-loader',
          options: {
            transpileOnly: true
          }
        }, {
          loader: 'angular2-template-loader?keepUrl=true'
        }],
        exclude: [/node_modules/],
      },
      {
        test: /\.(css)$/,
        loaders: ['to-string-loader', 'css-loader']
      },
      {
        test: /\.(html)$/,
        loader: 'raw-loader'
      }
    ]
  }
}

[LeJeanbono]

Could do the job ? https://medium.com/@BiigDigital/angular-et-la-configuration-webpack-1f9398313e43

[LeJeanbono]

https://www.twilio.com/blog/2018/03/building-an-app-from-scratch-with-angular-and-webpack.html With

new HtmlWebpackPlugin({
     template: __dirname + '/src/index.html',
     output: __dirname + '/dist',
     inject: 'head'
}),