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自動添加資源路徑還是手動添加就是個人選擇了，所以重點是第一步