Concat and import

[g1un]

Hie!

I want first to concat my old js files into one file and then import this new file to my main app.js. I can't import each file separately since they have to use functions from each other and webpack isolates them and prevents it.

Webpack-concat-plugin creates file, but it can't be imported.

My config:

const path = require('path');
const autoprefixer = require('autoprefixer');
const plugins = require('./webpack/plugins');
const includesLoader = require('./webpack/includesLoader');

const SRC_DIR = path.resolve(__dirname, 'resources/assets/src');
const DIST_DIR = path.resolve(__dirname, 'public/dist');

const svgObject = require('./webpack/svgObject')(SRC_DIR + '/svg');

let config = (env, argv) => {
    let isProd = argv.mode === 'production';

    return {
        entry: SRC_DIR + '/js/app.js',
        output: {
            path: DIST_DIR,
            filename: 'js/bundle.js'
        },

        resolveLoader: {
            modules: ['node_modules', './webpack/']
        },

        resolve: {
            modules: [
                "node_modules",
                "resources/assets/src/spritesmith-generated",
                "resources/assets/src/img",
                "resources/assets/src/legacy/img",
                "resources/assets/src/fonts"
            ]
        },

        module: {
            rules: [
                {
                    test: /\.js$/,
                    include: SRC_DIR,
                    loader: 'babel-loader',
                    query: {
                        presets: ['es2015']
                    }
                },
                {
                    test: /\.(scss|css)$/,
                    use: [
                        {
                            loader: "file-loader",
                            options: {
                                name: 'css/style.css'
                            }
                        },
                        {
                            loader: 'extract-loader',
                            options: {
                                publicPath: '../'
                            }
                        },
                        {
                            loader: "css-loader",
                            options: {
                                minimize: isProd,
                                alias: {
                                    "../fonts/roboto": path.resolve(__dirname, "node_modules/materialize-css/dist/fonts/roboto")
                                }
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                plugins: function () {
                                    return [autoprefixer('last 2 versions', 'ie 10')]
                                }
                            }
                        },
                        "sass-loader"
                    ]
                },
                {
                    test: /\.pug$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '[name].html'
                            }
                        },
                        {
                            loader: 'pug-html-loader',
                            options: {
                                pretty: true,
                                data: {
                                    svg: svgObject
                                }
                            }
                        },
                        {
                            loader: 'includesLoader',
                            options: {
                                pathToIncludes: SRC_DIR + '/includes'
                            }
                        }
                    ]
                },
                {
                    test: /\.png$/,
                    include: [ SRC_DIR + '/spritesmith-generated' ],
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: 'img/sprite/[name].png'
                            }
                        }
                    ]

                },
                {
                    test: /\.(jpe?g|png|gif|svg)$/i,
                    include: [ SRC_DIR + '/img', SRC_DIR + '/legacy/img' ],
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: 'img/[name].[ext]'
                            }
                        }
                    ]

                },
                {
                    test: /\.(eot|svg|ttf|woff|woff2)$/i,
                    include: [ SRC_DIR + '/fonts', path.resolve(__dirname, 'node_modules/materialize-css/dist/fonts/roboto') ],
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: 'fonts/[name].[ext]'
                            }
                        }
                    ]

                }
            ]
        },

        plugins: plugins(isProd, SRC_DIR, DIST_DIR),

        devServer: {
            disableHostCheck: true,
            host: '0.0.0.0'
        }
    }
};

module.exports = config;

plugins:

const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const SpritesmithPlugin = require('webpack-spritesmith');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const ConcatPlugin = require('webpack-concat-plugin');

let plugins = (isProd, src, dist) => {
    let SRC_DIR = src;
    let DIST_DIR = dist;

    //common for dev and prod plugins
    let pluginsArr = [
        new ConcatPlugin({
            filesToConcat: [ './resources/assets/src/legacy/js/partials/*' ],
            // outputPath: SRC_DIR,
            fileName: 'legacy.bundle.js',
            injectType: 'none'
        }),

        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }),

        new CopyWebpackPlugin([
            {
                from: SRC_DIR + '/img/',
                to: DIST_DIR + '/img/'
            },
            {
                from: SRC_DIR + '/legacy/img/',
                to: DIST_DIR + '/img/'
            },
            {
                from: SRC_DIR + '/legacy/admin-extras/css/',
                to: DIST_DIR + '/css/'
            },
            {
                from: SRC_DIR + '/fonts/',
                to: DIST_DIR + '/fonts/',
            },
            {
                from: SRC_DIR + '/legacy/admin-extras/js/',
                to: DIST_DIR + '/js/',
            }
        ]),
        new ImageminPlugin({
            test: /\.(jpe?g|png|gif|svg)$/i,
            disable: !isProd,
            optipng: {
                optimizationLevel: 3
            }

        })
    ];

    //3 sprites: 1x, 2x, 3x
    for(let i = 1; i < 4; i++) {
        pluginsArr.push(
            new SpritesmithPlugin({
                src: {
                    cwd: path.resolve(__dirname, `../src/sprite/${i}x`),
                    glob: '*.png'
                },
                target: {
                    image: SRC_DIR + `/spritesmith-generated/sprite${i}x.png`,
                    css: SRC_DIR + `/src/scss/components/sprite/_sprite${i}x.scss`
                },
                apiOptions: {
                    cssImageRef: `~sprite${i}x.png`
                    // cssImageRef: `../img/sprite/sprite${i}x.png`
                }
            })
        );
    }

    return pluginsArr;
};

module.exports = plugins;

app.js:

import './../index.pug';
import './../pages/main.pug';

import './../scss/style.scss';

import Sandwich from './components/sandwich';
import Accordion from './components/accordion';
import Question from './components/question';

//LEGACY
import 'imports-loader?define=>false!./legacy.bundle.js';
//-LEGACY

//NEW
new Sandwich('.js-sandwich', '.js-sandwich-menu').init();
new Accordion().init();
new Question().init();