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',
          }
          ],
      },
	]
}

萬事，收工！