webpack打包后引用cdn的js_webpack入门

内容提纲：

• electron-vue项目中的webpack工程实例
• 思考
• webpack与gulp/grunt
• HMR

electron-vue项目中的webpack工程实例

从electron-vue项目中的实际使用例子来入手

如下是 webpack.renderer.config.js 文件

'use strict'
​
process.env.BABEL_ENV = 'renderer'
​
const path = require('path')
const {
     dependencies } = require('../package.json')
const webpack = require('webpack')
​
const BabiliWebpackPlugin = require('babili-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
​
let whiteListedModules = ['vue']
​
let rendererConfig = {
    
  /**
   * 控制打包后代码的形式，影响调试。当前设置为cheap-module-eval-source-map，调试时仅可看到原始源代码      
   *（仅限行），如果同时使用了代码压缩插件，代码被合成一行，将无法获取有效的调试内容。
   */
  devtool: '#cheap-module-eval-source-map',
  
  /**
   * webpack处理项目的入口文件，以该文件作为构建其内部依赖图的开始。
   * 通常是项目的 index 或 main 文件
   * 注意 entry 可以是一个数组，即 webpack 可以处理多个入口文件，将其
   */
  entry: {
    
    renderer: path.join(__dirname, '../src/renderer/main.js')
  },
  
  /**
   * 声明外部依赖，在此声明的文件，即使在工程中使用import引入，也不会被打到bundle中。
   * 一般我们会把package.json中的dependencies排除在外。
   * 当我们需要使用cdn引用第三方库时，我们也要将其放在external中，比如使用jquery cdn
   * 思考1：node_modules中的三方库被排除在打包的bundle文件外，为什么我们的程序在打包后仍然能够使用
   * 三方库
   */
  externals: [
    ...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d))
  ],
    
  /**
   * 模块是 webpack 的核心，webpack 帮我们把文件打包成模块，然后我们就可以使用 import 的方式来
   * 使用。webpack 通过 loader 来各种处理文件，因此我们可以在项目中使用模块化的方法引用任何类型的文件
   */
  module: {
    
    rules: [
      {
    
        /**
         * test 做正则匹配，所有符合该匹配规则的文件都将应用该 loader 规则
         */ 
        test: /.(js|vue)$/,
        /**
         * enfore 用来定义规则的执行顺序，取值 ['pre', 'post']，此处为 pre，将在所有 loader 执行前
         * 执行。即在所有 loader 规则之前，使用 eslint-loader 对代码做静态检查
         */ 
        enforce: 'pre',
        /**
         * exclude 排除不想应用该规则的目录
         */ 
        exclude: /node_modules/,
        /**
         * useEntry 配置loader
         */ 
        use: {
    
          loader: 'eslint-loader',
          options: {
    
            formatter: require(&