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 母版頁

<% 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參數，設置是否須要引用外部資源

至此，咱們完成了切換外部資源和模塊引用兩種使用方式。