How to combine multiple js files into one webpack?

V

vitaly_742022-02-15 16:19:36

webpack

vitaly_74, 2022-02-15 16:19:36

I use this config:

const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: [
        './node_modules/vue-router/dist/vue-router.global.js',
        './node_modules/http-vue-loader/src/httpVueLoader.js',
        './node_modules/vue/dist/vue.common.prod.js',
    ],
    devtool: 'source-map',
    output: {
        filename:'bundle.js',
        path: __dirname + '/js'
    },
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                include: /\.js$/
            }),
        ],
    },

};

For faster development, I need to forego compiling vue, and in fact I need to merge these files into one. How can I do that?
at the moment, the router and the main index.js file (in which the entire application is written) do not see vue.
but if you connect scripts separately:

<!--    <script   src="node_modules/vue/dist/vue.js"></script>-->
<!--    <script   src="node_modules/vue-router/dist/vue-router.global.js"></script>-->
<!--    <script   src="node_modules/http-vue-loader/src/httpVueLoader.js"></script>-->

that works as it should.
what am I doing wrong?!
(I remind you that I only need to glue these files together, I really need it, maybe this does not correspond to your ideas about development, but I need it that way).
Just in case, I'll leave index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script   src="node_modules/vue/dist/vue.js"></script>-->
<!--    <script   src="node_modules/vue-router/dist/vue-router.global.js"></script>-->
<!--    <script   src="node_modules/http-vue-loader/src/httpVueLoader.js"></script>-->
    <script src='js/bundle.js'></script>
</head>
<body>
<div id="app">
    <h1>Passing Route Parameters to Component Props</h1>
</div>
<script src='js/index.js'></script>
</body>
</html>