Webpack：如何构建页面级脚本结构？

嘿，这种渐进式迁移的场景我经手过不少，结合你的情况，咱们可以分阶段来构建页面级JS，既不打乱现有业务，又能顺利过渡到Webpack+ES6+Vue的架构：

• 先把全局依赖（jQuery、jQuery UI、Bootstrap JS、moment.js这些）统一纳入Webpack管理，用ProvidePlugin让它们在所有模块中全局可用，这样现有代码不用做任何修改就能继续运行，避免初期的兼容性问题：

  const webpack = require('webpack');
  const path = require('path');
  
  module.exports = {
    entry: {}, // 后续补充多入口配置
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist/js')
    },
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        moment: 'moment',
        // Typeahead相关的全局暴露
        Bloodhound: 'typeahead.js/dist/bloodhound',
        typeahead: 'typeahead.js/dist/typeahead.jquery'
      })
    ]
  };
  

• 把原来每个页面底部的零散JS代码，拆成独立的模块文件，比如放到src/pages/目录下，命名为user-profile.js、dashboard.js等，每个文件对应一个页面的逻辑，为后续的模块化打包做准备。

• 先给每个页面模块套上ES6的模块化外壳，初期可以保留原有jQuery逻辑，逐步替换成ES6语法。比如原来的页面底部代码：

  $(function() {
    $('#datepicker').datepicker();
    $('#search-input').typeahead({ /* 旧配置 */ });
  });
  

  改成模块化形式（还能按需引入库的子集，减少打包体积）：

  // src/pages/user-profile.js
  // 按需引入jQuery UI的日期选择器组件，而非整个库
  import 'jquery-ui/ui/widgets/datepicker';
  import 'typeahead.js/dist/typeahead.jquery';
  
  // 用ES6箭头函数替代传统函数
  $(document).ready(() => {
    $('#datepicker').datepicker();
    $('#search-input').typeahead({ /* 旧配置 */ });
  
    // 这里可以无缝插入Vue组件的初始化代码
    import Vue from 'vue';
    import UserNotification from '../components/UserNotification.vue';
  
    new Vue({
      el: '#notification-container',
      render: h => h(UserNotification)
    });
  });
  

• 不要试图一次性把所有jQuery代码改成Vue，采取**"新增用Vue，旧代码逐步替换"**的策略：比如新的表单用Vue双向绑定+组件化，旧的表单验证暂时保留jQuery，等后续迭代再重构。

• 配置Webpack的多入口，让每个页面对应一个入口文件，输出独立的chunk，避免所有代码打包成一个超大文件：

  module.exports = {
    entry: {
      'user-profile': './src/pages/user-profile.js',
      'dashboard': './src/pages/dashboard.js',
      'order-list': './src/pages/order-list.js',
      // 其他页面依次添加...
    },
    // 其他配置不变
  };
  

• 在对应的HTML页面中，只引入该页面专属的bundle.js，比如用户 profile 页面只加：

  <script src="/dist/js/vendor.bundle.js"></script> <!-- 公共依赖抽离包 -->
  <script src="/dist/js/user-profile.bundle.js"></script>
  

• 用splitChunks抽离公共依赖（比如Vue、jQuery、moment.js）到单独的vendor.bundle.js，让多个页面共享缓存，提升加载速度：

  module.exports = {
    optimization: {
      splitChunks: {
        chunks: 'all',
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendor',
            chunks: 'all'
          }
        }
      }
    }
  };
  

• 对于只用到部分功能的库（比如Bootstrap JS只需要模态框），不要引入整个库，按需引入对应模块：

  import 'bootstrap/js/dist/modal'; // 仅引入模态框组件
  

• 如果旧代码依赖自定义全局变量，比如window.globalUtils，可以暂时用window.globalUtils访问，后续逐步把这些全局工具封装成ES6模块，用import引入。
• 配置Babel+ESLint：用Babel兼容旧浏览器（如果需要支持IE11等），用ESLint规范ES6代码风格，避免团队协作中的代码混乱。

内容的提问来源于stack exchange，提问作者DatsunBing