How to merge all js files into one? With minify in webpack 1.* ?

Here is my part of webpack config

entry: {
    bundle: "./src/index.tsx",
    styles: './static/scss/main.scss',

    main : [
        './static/js/jquery.js',
        './static/js/bowser.js',
        './static/js/bootstrap.js',
        './static/js/jquery.resizeend.js',
        './static/js/slick.js',
        './static/js/jquery.waypoints.js',
        './static/js/jquery.backgroundpos.js',
        './static/js/jquery.fancybox.js',
        './static/js/select2.full.js',
        './static/js/jquery.mousewheel.js',
        './static/js/clipboard.js',
        './static/js/circle-progress.js',
        './static/js/mon.js',
        './static/js/main.js'
    ]
},
output: {
    filename: "[name].js",
    path: "../root/js/react",
    library: '[name]'
},

after build all js files are minified but i have problems with these dependencies :

bootstrap can't find jquery

Uncaught Error: Bootstrap's JavaScript requires jQuery
    at Object.1213 (main.js:3)
    at t (main.js:1)
    at Object.0 (main.js:1)
    at t (main.js:1)
    at main.0 (main.js:1)
    at main.js:1

Note: Jquery es before bootstrap so it should be ok

How to merge all js files into one? With minify in webpack 1.* ?

Here is my part of webpack config

entry: {
    bundle: "./src/index.tsx",
    styles: './static/scss/main.scss',

    main : [
        './static/js/jquery.js',
        './static/js/bowser.js',
        './static/js/bootstrap.js',
        './static/js/jquery.resizeend.js',
        './static/js/slick.js',
        './static/js/jquery.waypoints.js',
        './static/js/jquery.backgroundpos.js',
        './static/js/jquery.fancybox.js',
        './static/js/select2.full.js',
        './static/js/jquery.mousewheel.js',
        './static/js/clipboard.js',
        './static/js/circle-progress.js',
        './static/js/mon.js',
        './static/js/main.js'
    ]
},
output: {
    filename: "[name].js",
    path: "../root/js/react",
    library: '[name]'
},

after build all js files are minified but i have problems with these dependencies :

bootstrap can't find jquery

Uncaught Error: Bootstrap's JavaScript requires jQuery
    at Object.1213 (main.js:3)
    at t (main.js:1)
    at Object.0 (main.js:1)
    at t (main.js:1)
    at main.0 (main.js:1)
    at main.js:1

Note: Jquery es before bootstrap so it should be ok

• javascript
• webpack
• bundle

1 Answer 1

Jquery es before bootstrap so it should be ok

No that is not the case, because webpack still keeps them as modules, but bootstrap expects jQuery to be present globally. You can fix this by using the ProvidePlugin, so webpack automatically imports jQuery whenever it sees it being used. Add it to your plugins section in your webpack config:

plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
]

Note: I linked the docs for webpack 2, but this works the exact same for webpack 1.