webpack之externals操作三部曲--正确的姿势 た 入场券 2022-03-18 08:18 183阅读 0赞 排除误区: 看到有人误解externals的作用,所以必须先正确认识externals的作用 1.作用 首先webpack提供这个==externals==选项作用是==从打包的bundle文件中排除依赖==。换句话说就是让在项目中通过import引入的依赖在打包的时候不会打包到bundle包中去,而是通过script的方式去访问这些依赖。 2.怎么用? 以jquery为例子,目的是在runtime时通过cdn获取jquery依赖,在打包时忽略他的打包 步骤一: //index.html <script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"> </script> 步骤二: //webpack.config.js module.exports = \{ //... externals: \{ jquery: 'jQuery' //将需要忽略打包的都写在这个里面,但前提是index.html文件里面必须script引入 \} \}; //属性名jquery指的是 import $ from 'jquery'中的 'jquery' 属性值 jQuery指的是jquery插件暴露出来的全局对象名。按理来说$应该也是可以写在属性值里面的,(也是jquery暴露的啊,但我没试过行不行)。 步骤三: 文件中的 import $ from 'jquery'; 千万不能去掉。 很重要,好多人就是把它去掉了跑过来问我为啥我的还是报错jquery is undefined。
还没有评论,来说两句吧...