javascript - vue 使用cdn问题请教

Question

请教一下， {代码...} 像这种公共的js文件， 怎么用cdn引用进来呢。 目前是npm install 安装的， 都在本地， 出口有限，很多包都是可以用cdn引入的。 但是目前都是vue框架操作的，没有直接从html引入的写的地方。...

ringa_lee · Answer

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  },
  externals: {
      jquery: 'jQuery.noConflict()', //或者jquery:'jQuery',
      $: 'jQuery.noConflict()'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
    }

webpack这样配置, html引入cdn的jquery


  
  
  
  lawyer_fe

女神的闺蜜爱上我 · Answer

就直接在 html 里中从 CDN 引入，没必要引进来起来一起打包/压缩了

大家讲道理 · Answer

第三方的库有cdn地址的，那就可以直接html中引入了，在template的html中。
然后你也可以把代码扔到你自己的cdn上，统一管理，跟你的其他静态文件同样的处理方式，比如你的img文件都放到cdnUrl+projectName/img/ 这些第三方库也扔上去。
你现在本地是npm包管理的，那你引用的时候如果是import进来的，肯定会被webpack打包的... 这就涉及到webpack的问题了。还是先看看能不能解决现在的问题吧

高洛峰 · Answer

可以看一下webpack的文档，文档上面有写，还是挺详细的，以jQuery为例子

https://doc.webpack-china.org...

淡淡烟草味 · Answer

解决你的问题需要以下几个步骤
1、提取本地由npm安装，通过import引入的js文件，这部分可以通过CommonsChunkPlugin插件进行提取参考webpack代码分离

例如：

entry: {
    main:['./src/index.js'],
    vue:['vue'],
    jquery:['jquery']    
  }
...
plugins: [
    new webpack.optimize.CommonsChunkPlugin({
          name: ['vue','jquery'], // 指定公共 bundle 的名字。
          minChunks: function(module){
            return module.context && module.context.indexOf("node_modules") !== -1;
        }
      })
]

2、利用HtmlWebpackPlugin解决js打包之后的路径和文件名问题

    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html',//模板路径
            inject: true,
            hash:true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
                // more options:
                // https://github.com/kangax/html-minifier#options-quick-reference
           }
       })
   ]

以上资源路径配置在output项

// webpack.config.js
output: {
    ...
    publicPath: debug ? 'build/' : 'https://cdn.bootcss.com/element-ui'
}

最终生成效果是这样

// 生产环境
// a.html

你的问题主要在于以上公共js文件的提取，至于提取出来后，采用HtmlWebpackPlugin自动添加资源路径还是手动添加就是个人选择了，所以重点是第一步