上一篇文章我们讲到了如何打造自己的Javascript类库
接下来我们发现使用外部资源引用方式后，修复一些bug和新增一些功能必须要等到下一版本发布，在项目中才能使用，而且修改类库后本地运行的代码无法即时刷新，影响我们的开发效率，于是我们又想在开发时把我们的外部资源引用方式切换回模块引用。
添加命令
package.json
"start": "webpack-dev-server --mode=development --open",
"start:module": "webpack-dev-server --mode=development --open --externals=false"
start：外部资源引用模式。
start:module ：模块引用模式。当我们需要切换回模块引用方式时，运行这个命令启动程序。
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const args = require('node-args');
const isExternals = args.externals !== false;
module.exports = {
//...
plugins: [
//...
new HtmlWebpackPlugin({
filename: 'index.html',
template: `${__dirname}/src/template.ejs`,
//...
// 添加参数IS_EXTERNALS，后面母版页会使用
IS_EXTERNALS: isExternals,
}),
],
// 如果非外部资源引用方式，设置externals为undefined
externals: isExternals ? {
//...
'my-library': 'myLibrary'
} : undefined,
};
template.ejs 母版页
<% if (htmlWebpackPlugin.options.IS_EXTERNALS) { %>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0/umd/react.production.min.js"></script>
//...
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/my-library/13.0.0/my-library.min.js"></script>
<% } %>
根据上面传入的IS_EXTERNALS参数，设置是否需要引用外部资源
至此，我们完成了切换外部资源和模块引用两种使用方式。
