webpack4 兼容老项目中的 require.js

项目使用 require.js 进行模块化编程，并使用 gulp-requirejs-optimize 打包js文件，打包性能并不是很好。
require.js 使用 AMD 语法，webpack同样支持AMD语法，迁移成本较低，因此将 gulp 迁移至 webpack 4.38.0。

开始

---

先看一下requirejs.config

requirejs.config({
    baseUrl: '/public/js',
    paths: {
        jquery: 'lib/jquery',
    	jqueryUI: 'lib/jquery-ui',
    	moment: 'lib/moment',
    	qs: 'lib/qs',
    	lodash: 'lib/lodash',
    	selectize: 'lib/selectize',
    }
});

require(['jquery', 'moment', 'modal/index'], function( $, moment, modal ){
    console.log($);
});

首先，需要让webpack能够解析上面path中的地址
开始配置 resolve.alias
webpack.config.js :

const path = require('path');
const resolve = filePath => path.resolve(process.cwd(), filePath);

module.exports = {
 resolve: {
    alias: {
        jquery: resolve('lib/jquery'),
    	jqueryUI: resolve('lib/jquery-ui'),
    	moment: resolve('lib/moment'),
    	qs: resolve('lib/qs'),
    	lodash: resolve('lib/lodash'),
    	selectize: resolve('lib/selectize'),
    }
  },
}

这样可以让webpack可以正确解析require的依赖。文档
但是项目中同样还有很多像是上面modal/index这中路径方式引入的依赖，如果不去定义会产生下面的报错

看了一遍文档得知modules可以解决这个问题～
上代码

 resolve: {
	  modules: [resolve('public/js')],
  }

就这么简单～

---

当然了，项目中很多插件依赖jquery，因此需要将其暴露至全局

$ npm i -D expose-loader

将下面的规则添加至 module.rules 中

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

万事，收工！