Initial Configuration
For start we need to tell Webpack our application entry and output points
var path = require('path');
module.exports = {
entry: {
appPart1: './src/appPart1.ts',
appPart2: './src/appPart2.ts',
}
output: {
path: path.resolve(__dirname, './dist/),
filename: '[name].bundle.js'
}
}
entry: Webpack gets two files for entry
output.path: Webpack outputs both files to ‘./dist’ folder located in our root folder
output.filename: Webpack names both files according to their entry
In most cases you will have only 1 entry file – main.ts, from which Webpack will get to all needed other files.
Loaders
Angular is writter in TypeScript and supports external templates and styles.
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
But the browser alone don`t understand that. So we must get all of this into one(or several if the app is big) JavaScript file/s. We do that by using Webpack Loaders. Here are the most common used with Angular:TypeScript
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader?keepUrl=true']
}
HTML
{
test: /\.html$/,
use: 'raw-loader'
}
CSS
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
}
test: File type to look for. We provide a regex expression that will match the required files
loaders/use: The loaders to use
Webpack processes Loaders from right to left, so the results of css-loader (the file contents) are passed to style-loader (adding the styles to the HTML document)
Important: In order to use this loaders we need to have their dependencies installed.
For more info about loaders please visit Webpack Official Page
Full Example
'use strict';
let path = require('path');
let webpack = require('webpack');
module.exports = {
entry: './app/main.ts',
output: {
path: path.resolve(__dirname + '/dist'),
filename: 'bundle.js'
},
module: {
loaders:
[
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader?keepUrl=true']
},
{
test: /\.htm$/,
use: 'raw-loader'
},
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
}
]
},
plugins: [
new webpack.ProgressPlugin(),
new webpack.ContextReplacementPlugin(
/angular(\\|\/)core(\\|\/)@angular/,
path.join(process.cwd(), 'app')
)
],
resolve: {
extensions: ['.ts', '.js']
}
};