webpack externals配置方式介绍

站长

2022年09月17日 21:04 · 阅读数 135

webpack 中的 externals 配置提供了不从 bundle 中引用依赖的方式。简单理解就是不通过npm下载的类库，在html文件中以script引入，然后在页面中使用import导入的这种方式

以vue开发环境为示例

在public/index.html中引入moment.min.js类库

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/1.0.0/moment.min.js"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

通过externals配置，就可以在.vue文件中使用import引入

一、数组方式

vue.config.js

module.exports = {
  configureWebpack: {
    externals: ['moment'] // moment是全局变量名
  }
}

App.vue

<script>
import moment from 'moment '
</script>

二、对象方式

vue.config.js

module.exports = {
  configureWebpack: {
    externals: {
      mnt: 'moment' // moment是全局变量名
    }
  }
}

App.vue

<script>
import moment from 'mnt'
</script>

其他

externals : {
  lodash : {
    commonjs: "lodash",
    amd: "lodash",
    root: "_" // 指向全局变量
  }
}

这里lodash 这个外部 library 可以在 AMD 和 CommonJS 模块系统中通过 lodash 访问，但在全局变量形式下用 _ 访问。

三、正则方式

vue.config.js

module.exports = {
  configureWebpack: {
    externals: /^(moment)$/i // moment是全局变量名
  }
}

App.vue

<script>
import moment from 'moment '
</script>

四、函数方式

vue.config.js

module.exports = {
  configureWebpack: {
    externals: [
      function(context, request, callback) {
        if (/^moment$/.test(request)) { // moment是全局变量名
          return callback(null, 'es6 ' + request);
        }
        callback();
      }
    ]
  }
}

App.vue

<script>
import moment from 'moment '
</script>

欢迎关注：http://fenxianglu.cn/

转载自:https://segmentfault.com/a/1190000023914151