美文网首页
webpack之外部资源和模块引用使用方式切换

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

作者: kingller | 来源:发表于2019-01-21 15:28 被阅读0次

    上一篇文章我们讲到了如何打造自己的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参数,设置是否需要引用外部资源

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

    相关文章

      网友评论

          本文标题:webpack之外部资源和模块引用使用方式切换

          本文链接:https://www.haomeiwen.com/subject/xaoqjqtx.html