结果是构建结束后,文件比较大。那么考虑使用cdn,如上文描述的那样。这样需要删除import或require的引用,同时删除安装的jquery依赖,但是由于项目结构比较乱,模块比较多,为了避免造成少改或者漏改的问题,会造成应用出错。该怎么办呢?
有的人说,不删除jquery依赖,那么使用cdn的目的就没有意义了。而使用external则可以解决这个问题。
可以在module.js文件中添加如下代码:
... var $ = require('jquery') ...
然后,保存文件,发现构建输出提示如下的错误:
ERROR in ./module.js Module not found: Error: Can't resolve 'jquery' in 'E:\workspace\me\webpack-play\demo\example-1' @ ./module.js 3:0-23 @ ./main.js @ multi (webpack)-dev-server/client?:8080 ./main.js
模块module.js中的jquery不能被解析。
紧接着,在webpack.config.js中添加如下代码:
externals: { jquery: 'jQuery', jquery: '$' },
其中jquery代表的是require('jquery')中的jquery,而jQuery和$代表的是jquery这个库自身提供的可是实例化的标识符。其它的库的cdn化,修改类似jquery。
但是,如果在项目一开始就决定用cdn的话,就不要在使用jquery的模块中,使用var $ = require('jquery') 或 import $ from 'jquery';,虽然这样做不会报错,但是如果出于某方面的考虑,后期可能会引入jquery依赖,那么就必须使用var $ = require('jquery') 或 import $ from 'jquery'; 。