How to use Webpack with Angular 4

Webpack roams over your application source code, looking for import statements, building a dependency graph, and emitting one or more bundles. With plugins and rules, Webpack can preprocess and minify different non-JavaScript files such as TypeScript, SASS, and LESS.

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']
        }
    };
 

About admin


This entry was posted in Uncategorized and tagged , , , , . Bookmark the permalink.



Leave a Reply