webpack之externals操作三部曲--正确的姿势

排除误区：
看到有人误解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。  

laravel+vue项目中怎么使用externals

两步曲：
1.

//webpack.mix.js

let mix = require('laravel-mix');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
mix.webpackConfig({
    plugins: [
      // new BundleAnalyzerPlugin(),
    ],
    externals: {
        'vue' : 'Vue',
        'vuex' : 'Vuex',
        'vue-router' : 'VueRouter',
        'element-ui' : 'Element',
        'lodash' : '_',
        'jquery' : 'jQuery',
        'axios' : 'axios',
    }
  }).js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .extract(['vue','vuex',])
    .styles(['node_modules/element-ui/lib/theme-chalk/index.css'], 'public/css/element-ui.css');

2.

//welcome.blade.php

外部引入cdn的地址
      <script src="//cdn.bootcss.com/vue/2.5.7/vue.min.js"></script>
      <script src="//cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
      <script src="//cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
      <script src="//cdn.bootcss.com/element-ui/2.2.0/index.js"></script>
      <script src="//cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
      <script src="//cdn.bootcss.com/axios/0.17.0/axios.min.js"></script>
      <script src="//cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js"></script>
      <script src="{{ mix('js/manifest.js') }}"></script>
      <script src="{{ mix('js/vendor.js') }}"></script>
      <script src="{{ mix('js/app.js') }}"></script>