webpack之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。