介紹：

        我們在開發的過程中有很多組件都需要復用，特別是我們耗費了好幾天時間寫出來的組件，比如自己寫的表格組件，流程圖組件等。總之都是自己不斷測試，不斷編寫耗費了大把的精力寫的。直接用到自己的項目中倒是無所謂，如果是把自己寫的組件給別人，這里就涉及到自己的勞動成功了，特別是項目尾款還沒到賬的情況下，代碼都給別人了對自己是很不利的。所以這節課的內容很重要，教大家如何將自己的寫的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