M
M
makcstudio2019-02-02 19:37:12
Angular
makcstudio, 2019-02-02 19:37:12

Very long project build using webpack. How to fix?

Hello everyone, when I used systemJs to build everything was fine, but all the files were open + I wrote the code in visual studio and I switched to webpack + now the project is in vscode . Now the bundle is assembled in about 22 seconds (that is, it is completely rebuilt)
Is it possible somehow not to rebuild the bundle completely if, for example, I change only 1 typescript file?
I don't use any webpack-server, I just compile via npm run webpack-script --color=always
Here is the webpack.config, maybe someone knows how to deal with it .. Just 20 seconds to see the change during development is a lot

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
    entry: {
        'polyfills': './wwwroot/app/polyfills.ts',
        'app': './wwwroot/app/main.ts'
    },
    output: {
        path: path.resolve(__dirname, 'wwwroot/bundle/'),     // путь к каталогу выходных файлов - папка public
        publicPath: '/bundle/',
        filename: '[name].[hash].js',
        chunkFilename: '[name].[hash]-chunk.js',
    },
    devServer: {
        historyApiFallback: true,
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        rules: [   //загрузчик для ts
            {
                test: /\.ts$/, // определяем тип файлов
                use: [
                    {
                        loader: 'awesome-typescript-loader',
                        options: 
                        { configFileName: path.resolve(__dirname, './wwwroot/tsconfig.json'), 
                        useCache: true,
                        },
                    },
                    'angular2-template-loader',
                    "angular-router-loader"
                ]
            }, {
                test: /\.html$/,
                loader: 'html-loader'
            }, {
                test: /\.cshtml$/,
                loader: 'html-loader'
            }, {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file-loader?name=assets/[name].[hash].[ext]'
            }, {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader"
                ]
            }, {
                test: /\app.min.js/,
                use: "imports-loader?this=>window"
            }
        ]
    },
    plugins: [
        new webpack.ContextReplacementPlugin(
            /angular(\|\/)core/,
            path.resolve(__dirname, ''),
            {
                './[name].js': './bundle/[name].js',
            }
        ),
        new HtmlWebpackPlugin({
            inject: "body",
            filename: '../../Views/Shared/_Layout.cshtml',
            template: './Views/Shared/_Layout_Template.cshtml'
        }),
        new MiniCssExtractPlugin({
            filename: "[name].css",
        }),
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.LoaderOptionsPlugin({
            htmlLoader: {
                minimize: false
            }
        }),
        new webpack.SourceMapDevToolPlugin({
            filename: '[name].map', // Remove this line if you prefer inline source maps
            moduleFilenameTemplate: path.relative('wwwroot/bundle/', '[resourcePath]') // Point sourcemap entries to the original file locations on disk
        }),
    ]
}

Answer the question

In order to leave comments, you need to log in

1 answer(s)
M
makcstudio, 2019-02-02
@makcstudio

Honestly, I didn't know. You need to read about the server. I thought that the server just does the same thing that I write in the console, only automatically

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question