webpack externals配置方式介绍
站长
· 阅读数 34
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>