webpack将组件vue进行编译混淆,并能正常使用编译之后的文件
介绍:
我们在开发的过程中有很多组件都需要复用,特别是我们耗费了好几天时间写出来的组件,比如自己写的表格组件,流程图组件等。总之都是自己不断测试,不断编写耗费了大把的精力写的。直接用到自己的项目中倒是无所谓,如果是把自己写的组件给别人,这里就涉及到自己的劳动成功了,特别是项目尾款还没到账的情况下,代码都给别人了对自己是很不利的。所以这节课的内容很重要,教大家如何将自己的写的vue组件用webpack进行编译混淆,并且混淆之后的文件我们可以正常的用import components这种形式继续使用。
案例:
先看demo
vue源代码:
如下代码可以看出整个目录结构,修改也很轻松,结构也清晰这个就是源码。当然这个只是一个很简单的demo,如果代码很复杂,我想编译之后更难修改了。
<template><div class="hello"><h1>{{ msg }}1111111</h1></div>
</template><script>
export default {name: 'HelloWorld',props: {msg: String}
}
</script><!-- Add