客服系统之前都是用Require.js 2.2.0进行模块化编程，并使用相应的r.js打包js文件，本次迁移成Webpack3.3.0。

为什么迁移

项目前期，require.js可以很好的解决需求，但是随着项目成长到具有上百个JS文件，越来越多的工作需要处理。除了组件化开发、打包发布，还有性能优化、工程化管理需要考虑，而require.js并不擅长做这些事情，如tree shaking, hot reloading, code splitting等。

令一方面现有项目的CSS打包、CSS预处理、文件合并等自动化构建也需要借助gulp或者shell脚本等工具实现，而这些工作，使用更先进生产力的webpack就可以全部完成。

Require.js写法

首先需要了解使用require.js的js文件的写法，baseUrl是默认路径，paths中定义了各个路径的别名，然后使用标准的AMD语法引用定义过的模块。

requirejs.config({
    //设定为git repo的dev路径;
    baseUrl: "../../../",
    paths: {
        test: "js/module/test",
        main : "js/module/main",
        model : "js/model",
        view : "js/view",
        api : "js/model",
        artTemplate: "js/3rdParty/artTemplate",
        util: "js/util",
        // "bootstrap" : "http://boss.static.xiaomi.net/common/bootstrap/3.3.4-fix/bootstrap",
        "bootstrap" : "js/3rdParty/bootstrap/3.3.4-fix/bootstrap",
        "jquery" : "http://boss.static.xiaomi.net/common/jquery/1.11.2/jquery",
        "jquery.validate" : "http://boss.static.xiaomi.net/common/jquery.validate/1.13.1/jquery.validate"
    }
});

// 注意:
// require选定某一个模块的baseUrl，是基于git repo的dev路径的;
require(['jquery', 'bootstrap', 'main/_main'], function( $, bt, _main ){
    _main.run();
});

开始迁移

Webpack本身是支持Amd的，所以不需要修改各个js组件的语法，只需要修改对应入口文件的require.js的配置即可。
修改后如下：

import _main from 'main/_main';
_main.run();

相应的paths对应到了webpack中的resolve中：

resolve: {
  extensions: [' ', '.js', '.css'],
  modules: [path.join(__dirname, 'dev/')],
  alias: {
    test: path.join(__dirname, 'dev/js/module/test'),
    main: path.join(__dirname, 'dev/js/module/main'),
    libs : path.join(__dirname, "dev/js/3rdParty"),
    model: path.join(__dirname, 'dev/js/model'),
    view: path.join(__dirname, 'dev/js/view'),
    api: path.join(__dirname, 'dev/js/model'),
    artTemplate: path.join(__dirname, 'dev/js/3rdParty/artTemplate'),
    util: path.join(__dirname, 'dev/js/util'),
    jquery: path.join(__dirname, 'dev/js/3rdParty/jquery/1.11.2/jquery'),
    bootstrap: path.join(__dirname, 'dev/js/3rdParty/bootstrap/3.3.4-fix/bootstrap'),
    'jquery.validate': path.join(__dirname, 'dev/js/3rdParty/jquery.validate/1.13.1/jquery.validate'),
    'datatables.css': path.join(__dirname,'dev/css/3rdparty_libs/datatables/1.10.13/dataTables.bootstrap'),
  },
}

项目中有大量依赖jQuery的第三方库，所以需要把jQuery暴露到全局中

{
  test: /jquery.js/,
  use: [{
    loader: 'expose-loader',
      options: '$'
  },
  {
    loader: 'expose-loader',
    options: 'jQuery'
  }]
},

总结

项目使用webpack替换掉原有繁杂的shell脚本打包文件，移除require.js，取得了很好的效果，且方便日常维护扩展。