介绍：

        我们在开发的过程中有很多组件都需要复用，特别是我们耗费了好几天时间写出来的组件，比如自己写的表格组件，流程图组件等。总之都是自己不断测试，不断编写耗费了大把的精力写的。直接用到自己的项目中倒是无所谓，如果是把自己写的组件给别人，这里就涉及到自己的劳动成功了，特别是项目尾款还没到账的情况下，代码都给别人了对自己是很不利的。所以这节课的内容很重要，教大家如何将自己的写的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 "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {background-color: blue