javascript - Ask for advice on using cdn with vue

Question

Please tell me, {code...} How to use cdn to reference a public js file like this. Currently, it is installed by npm install, all are local, and exports are limited. Many packages can be imported using cdn. But currently they are all operated by the Vue framework, and there is no writing place directly imported from 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 is configured like this, html introduces cdn’s jquery


  
  
  
  lawyer_fe

女神的闺蜜爱上我 · Answer

Just import it directly from CDN in html, there is no need to import it and package/compress it together

大家讲道理 · Answer

If the third-party library has a CDN address, it can be directly introduced into the HTML, in the HTML of the template.
Then you can also throw the code to your own cdn, manage it uniformly, and process it in the same way as your other static files. For example, your img files are placed in cdnUrl+projectName/img/, and these third-party libraries are also thrown on it. .
You are currently managed by npm package locally, so if you import it when you quote it, it will definitely be packaged by webpack... This involves the issue of webpack. Let’s see if we can solve the current problem first

高洛峰 · Answer

You can take a look at the webpack documentation. It is written in the documentation, which is quite detailed. Take jQuery as an example

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

淡淡烟草味 · Answer

Solving your problem requires the following steps
1. Extract the js files installed locally by npm and introduced through import. This part can be extracted through the CommonsChunkPlugin plug-in. Refer to webpack code separation

For example:

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. Use HtmlWebpackPlugin to solve the problem of path and file name after js packaging

    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'
}

The final generated effect is like this

// 生产环境
// a.html

Your problem mainly lies in the extraction of the above public js files. After extraction, it is a personal choice whether to use HtmlWebpackPlugin to automatically add resource paths or to add them manually, so the focus is on the first step