Question

如何将所有js文件合并为一个？在webpack 1. *？

中缩小

这是我的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/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在bootstrap之前出现所以它应该没问题

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

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

注意：我链接了webpack 2的文档，但这与webpack 1 完全相同。

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

1 个答案: