1.作用
首先webpack提供這個==externals==選項(xiàng)作用是==從打包的bundle文件中排除依賴==。換句話說就是讓在項(xiàng)目中通過import引入的依賴在打包的時候不會打包到bundle包中去，而是通過script的方式去訪問這些依賴。

2.怎么用？
以jquery為例子，目的是在runtime時通過cdn獲取jquery依賴，在打包時忽略他的打包

步驟一：

//index.html

<scriptsrc="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插件暴露出來的全局對象名。按理來說$應(yīng)該也是可以寫在屬性值里面的，（也是jquery暴露的啊，但我沒試過行不行）。

步驟三：

文件中的
import $ from 'jquery';
千萬不能去掉。 ?很重要，好多人就是把它去掉了跑過來問我為啥我的還是報錯jquery is ?undefined。 ?

總結(jié)

以上是生活随笔為你收集整理的webpack之externals操作三部曲--正确的姿势的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。