Webpack：如何构建页面级脚本

Question

我有一个包含大约 100 个页面/路由的应用程序。这些页面中大约有一半在底部有一些 javascript，从 5 到 100 行不等。 javascript 大量使用 jQuery 和其他库，例如 jQuery UI、Bootstrap 的 JS、moment、js、Typeahead 包等。

我需要在这里和那里添加一些 Vue.js 组件，所以我将借此机会转向 Webpack（用于捆绑）和 ES6。

我的问题是，我应该如何构建页内 javascript？我想把它移到 Webpack 上，这样我就可以利用 ES6，除了其他任何东西。我应该考虑 1 个 html 页面/路由 = 1 个模块吗？我应该将所有模块放在一个 js 文件中吗？我应该将其配置为 webpack 库吗？

除非我弄错了，对我打包代码的调用仍然需要来自我的 html 正文。另外，我喜欢命名空间的想法，例如通过自定义对象，以保持可读性。

Answer 1

我最终为所有页面级脚本创建了一个文件，该文件导出了一个模块。这是一个简单的对象，我用它来命名间距，如下所示。

export default {

    helpers : {

        alert : msg => { /* ... */ },
        calendar : selector => { /* ... */ }

    },

    siteSection1 : {

        pageNameLorum : {
            methodA() { /* ... */ },
            methodB() { /* ... */ }
        },

        pageNameIpsum : {
            methodA() { /* ... */ },
            methodB() { /* ... */ }
        }
    }
}

这似乎工作得很好。