javascript - how to merge all js files into one bundle webpack - Stack Overflow

admin管理员组

文章数量:1305775

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

Share Improve this question Follow edited Oct 16, 2017 at 9:32 Liam 29.8k2828 gold badges138138 silver badges201201 bronze badges asked Mar 1, 2017 at 9:47 Андрей ГузюкАндрей Гузюк 2,16466 gold badges3131 silver badges5656 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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.

本文标签： javascripthow to merge all js files into one bundle webpackStack Overflow