1

I've been using Webpack only for a short time and I don't know the configuration possibilities well yet.

I wrote some Vue code in Typescript. The code imports from Vue and from a few other packages.

Packing the whole thing takes 70 seconds. This is far too much time if I want to test small changes.

On the other hand, of course, Vue should be bundled to be available during runtime.

Is it possible to work with two webpack configuration files (e.g. webpack.vue.config.js and webpack.my.config.js) so that I don't have to repackage all dependencies on Vue and other packages in every build?

I'd like to pack the webpack.vue.config once and it always stays the same until I update a package. And after changes in my own code, I compile and pack my own code, which is very small and could be packed in about 5-10 seconds. Is that possible? If so, how can I achieve that?

My webpack.config:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { TsconfigPathsPlugin } = require( 'tsconfig-paths-webpack-plugin' );
const { VueLoaderPlugin } = require( 'vue-loader' );

module.exports = {
    stats:"minimal",
    entry: {
        script: './src/index.ts',
        mainstyle: './src/css/myproject.less'
    },
    optimization: {
        minimize: false
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve( __dirname, 'dist/' ),
    },
    module: {
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader'
        },
        {
            test: /\.(tsx|ts)?$/,
            loader: 'ts-loader',
            exclude: [/node_modules/, /Scripts/],
            options: {
                appendTsSuffixTo: [/\.vue$/],
            }
        },
        {
            test: /\.(css|scss)$/,
            use: [
                MiniCssExtractPlugin.loader,
                {
                    loader: 'css-loader'
                },
                {
                    loader: 'sass-loader'
                }
            ]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                    },
                    {
                        loader: 'less-loader',
                        options: {
                            lessOptions: {
                                strictMath: true,
                            },
                        },
                    }
                ]
            },
        ]
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx', '.vue'],
        plugins: [new TsconfigPathsPlugin( { configFile: "src/tsconfig.json" })],
    },
    plugins: [
        new VueLoaderPlugin(),
        new MiniCssExtractPlugin( {
            filename: '[name].css',
        } ),
    ],
    mode: "production",
    devtool: 'source-maps'
};
mirkomaty
  • 11
  • 1
  • What you are describing is commonly known as "hot reloading". Read this article from vue's docs and tell me if that's what you're trying to achieve: https://vue-loader-v14.vuejs.org/ru/features/hot-reload.html – Ilya Lopukhin Jan 13 '21 at 17:17
  • @IlyaLopukhin: Thank you for the interesting comment. Unfortunately, my own code also includes TypeScript classes that are not part of the Vue code, but are instantiated directly or indirectly by the Vue code. These classes are not considered by the Vue loader. Or did I misunderstand how Hot Reload works? – mirkomaty Jan 14 '21 at 09:21

0 Answers0