Webpack-cdn-local-plugin NPM

webpack-cdn-local-plugin

适用于 webpack4 以上，基于 HtmlWebpackPlugin 插件。

一个 webpack 插件，将外部 cdn 下载到本地并注入页面。

安装

npm

npm install webpack-cdn-local-plugin --save-dev

或 yarn

yarn add webpack-cdn-local-plugin --dev

基础用法

const WebpackCdnLocalPlugin = require('webpack-cdn-local-plugin')

module.exports = {
  // ...
  chainWebpack(config) {
    config.when(process.env.NODE_ENV === 'production', config => {
      config.plugin('WebpackCdnLocalPlugin').use(WebpackCdnLocalPlugin, [[
        {
          name: 'vue',
          var: 'Vue',
          script: 'https://unpkg.com/vue@2.6.14/dist/vue.min.js',
        },
        {
          name: 'vue-router',
          var: 'VueRouter',
          localScript: 'static/js/vue-router.min.js',
        },
        {
          name: 'element-ui',
          var: 'ELEMENT',
          style: 'https://unpkg.com/element-ui@2.15.9/lib/theme-chalk/index.css',
          localStyle: 'static/css/element-ui.min.css',
          script: 'https://unpkg.com/element-ui@2.15.6/lib/index.js',
          localScript: 'static/js/element-ui.min.js',
        },
      ]])
    })
  }
  // ...
};

生成的html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Index</title>
    <link href="/static/css/element-ui.min.css" rel="stylesheet">
  </head>
  <body>
    <script type="text/javascript" src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
    <script type="text/javascript" src="/static/js/vue-router.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/element-ui@2.15.6/lib/index.js"></script>
    <script type="text/javascript" src="/static/js/bundle.js"></script>
  </body>
</html>