angularjs – webpack & angular 2 build optimization

Question:

wrote such a collector

'use strict';

var DEVELOPMENT = 'development';
var PRODUCTION = 'production';

var NODE_ENV = process.env.NODE_ENV === PRODUCTION ? PRODUCTION : DEVELOPMENT;

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

var precss = require('precss');
var autoprefixer = require('autoprefixer');

var HtmlWebpackPlugin = require('html-webpack-plugin');
const { CheckerPlugin } = require('awesome-typescript-loader');

module.exports = {
    entry: {
        app: path.resolve(__dirname, './src/index.ts'),
        vendor: [
            'core-js/client/shim',
            'zone.js',
            'reflect-metadata',
            '@angular/platform-browser-dynamic',

            '@angular/core',
            '@angular/platform-browser',
            '@angular/forms',
            '@angular/http',
            '@angular/platform-browser/animations',
            '@angular/material'
        ]
    },
    output: {
        //publicPath: 'http://localhost:8080/',
        filename: '[name].[hash].js',
        path: path.resolve(__dirname, 'dist')
    },

    watch: NODE_ENV === DEVELOPMENT,
    devtool: NODE_ENV === DEVELOPMENT ? 'inline-source-map' : false,

    resolve: {
        extensions: ['.ts', '.js']
    },

    module: {
        rules: [{
            test: /\.ts$/,
            loaders: ['awesome-typescript-loader', 'angular2-template-loader'] //?keepUrl=true
        }, {
            test: /\.ts$/,
            enforce: 'pre',
            loader: 'tslint-loader',
            options: { }
        }, {
            test: /\.html$/,
            use: 'raw-loader'
        }, {
            test: /(\.less)|(\.css)$/i,
            loader: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [{
                    loader: 'css-loader'
                }, {
                    loader: 'postcss-loader?sourceMap',
                    options: {
                        plugins: function () {
                            return [
                                precss(),
                                autoprefixer()
                            ];
                        }
                    }
                }, {
                    loader: 'less-loader'
                }],
                publicPath: './'
            })
        }]
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            filename: 'vendor.[hash].js'
        }),
        new webpack.ContextReplacementPlugin(
            /angular(\\|\/)core(\\|\/)@angular/,
            path.join(__dirname, './src'),
            {}
        ),
        new ExtractTextPlugin({
            filename: 'styles.[hash].css',
            disable: false,
            allChunks: true
        }),
        new CheckerPlugin(),
        new HtmlWebpackPlugin({
            title: 'typescript',
            filename: 'index.html'
        })
    ].concat(NODE_ENV === PRODUCTION ? [
        new webpack.optimize.UglifyJsPlugin({
            warnings: false,
            unsafe: true,
            drop_console: false
        })
    ] : [
        //development
    ])
};

when I try to compile a project (and I have it almost empty, a couple of input fields), then I spend a lot of time on it. I agree when webpack compiles for the first time. but when I edit in one file, it collects everything again and spends 13-15 seconds. IMHO that's a lot

the current vendor list is the minimum I need, i.e. it will expand.

can optimization be done? so that vendor is only compiled once. and the project itself was going when there are changes (watch)?

Answer:

For development, you need to use devtool: 'eval' or devtool: 'cheap-eval-source-map' if you really need a resourcemap. devtool: 'inline-source-map' too slow for development. For production it is better to build with devtool: 'source-map' . Correct in the config:

devtool: NODE_ENV === DEVELOPMENT ? 'eval' : 'source-map',

Devtool documentation

Scroll to Top