webpack配置了externals后,区分生产环境和开发环境老是要手动注释某些代码,怎么办？

Question

通过externals配置后的模块，那么就可以直接用script引入cdn在线js文件。
那么遇到问题。
开发环境的时候
必须手动去注释掉一些代码，比如html文件的script标签，（cdn加载）
import element from 'element-ui'; main.js 这行又要去掉注释

index.html

<!--<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
    <script src="https://unpkg.com/vuex@3.1.1/dist/vuex.min.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.min.js"></script>
    <script src="https://unpkg.com/element-ui@2.11.1/lib/index.js"></script>
    <script src="https://unpkg.com/axios@0.19.0/dist/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.min.js"></script>-->

生产环境的时候
index.html

<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
    <script src="https://unpkg.com/vuex@3.1.1/dist/vuex.min.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.min.js"></script>
    <script src="https://unpkg.com/element-ui@2.11.1/lib/index.js"></script>
    <script src="https://unpkg.com/axios@0.19.0/dist/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.min.js"></script>

又要手动去掉注释
import element from 'element-ui'; main.js 这行又要注释

有什么办法可以不用手动去操作的？
欢迎大家讨论

Answer 1

1: html的问题你可以搞两个模板啊, 肯定就不用改了吧
2: js方面, 你可以把引入element-ui,的路径起一个别名, 别名的配置 , 在不同的环境下做点文整个就ok了

Answer 2

如果你使用html-webpack-plugin插件的话，可以试一下这个插件html-webpack-tags-plugin, 或者使用自定义模板