客服系统之前都是用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，取得了很好的效果，且方便日常维护扩展。