如何将所有 js 文件合并到一个 bundle webpack 中

Question

如何将所有js文件合并为一个文件？在 webpack 1 中使用 minify。* ?

这是我的webpack配置部分

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/common.js',
        './static/js/main.js'
    ]
},
output: {
    filename: "[name].js",
    path: "../root/js/react",
    library: '[name]'
},

构建后，所有 js 文件都被缩小了，但我遇到了这些依赖项的问题：

bootstrap 找不到 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

注意：Jquery 出现在 bootstrap 之前所以应该没问题

Answer 1

Jquery comes before bootstrap so it should be ok

不，情况并非如此，因为 webpack 仍然将它们保留为模块，但 bootstrap 期望 jQuery 全局存在。您可以使用 ProvidePlugin 来解决这个问题，因此 webpack 会在看到它被使用时自动导入 jQuery。将它添加到 webpack 配置中的 plugins 部分：

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

注意：我链接了 webpack 2 的文档，但这对 webpack 1 完全一样。

如何将所有 js 文件合并到一个 bundle webpack 中

how to merge all js files into one bundle webpack

javascript

bundle

webpack