webpack 使用外部的库_webpack之外部资源和模块引用使用方式切换

上一篇文章我们讲到了如何打造自己的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 母版页

//...

根据上面传入的IS_EXTERNALS参数，设置是否需要引用外部资源

至此，我们完成了切换外部资源和模块引用两种使用方式。