javascript – Bitten Sie um Rat zur Verwendung von CDN mit Vue

Question

Bitte sagen Sie mir, {code...}, wie man mit cdn auf eine öffentliche JS-Datei wie diese verweist. Derzeit wird es von npm install installiert, alle sind lokal und die Exporte sind begrenzt. Viele Pakete können mit cdn importiert werden. Derzeit werden sie jedoch alle vom Vue-Framework betrieben, und es gibt keinen direkt aus HTML importierten Schreibort. ...

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自动添加资源路径还是手动添加就是个人选择了，所以重点是第一步