一丟丟學習之webpack4 + Vue單文件組件的應用

以前剛學了一些Vue的皮毛因而寫了一個本地播放器https://github.com/liwenchi123000/Local-Music-Player，若是以爲ok的朋友能夠給個star。

就是很簡單，因爲是第一次用Vue寫小demo，因此代碼寫的有點蠢很裸的那種，不像大神那樣一看代碼組織的就很美。

但好就在因而和官網的文檔寫法差很少，爲何這麼說呢，看接下來的就知道了。

有一次看到了別人寫的應用，點進去一看驚呆了

 

這咋還能這麼寫呢？這html不用引用script嗎？

而後隨手在src裏找到了幾個其餘的文件

 

這都是啥？？？

可是20行到25行很熟悉，就是文檔裏的。可是第24行有是個啥？（這個至今沒明白，但願大佬能夠指點一二），可是這個main.js和index.html跟本就沒有關聯啊，第21行怎麼綁定到dom元素上的？

而後又隨手找到了一個看起來應該很重要的文件App.vue

這寫的感受很清晰很簡潔，和我一個好幾百行的js文件徹底不同有木有...

因此就查了一下相關資料，才知道這是vue-cli的功勞，可是這個東西是真的勸退。。。。。。我踏馬看了一下午都沒搞懂這玩意雜用，因而果斷放棄，網上的各類文章視頻，以及各類文檔根本看的我頭疼，反正最後也沒寫出來啥玩意。反正那些教程各類複雜，網上找了個vue-cli的教程，webpack配置佔了70%。

而後今天中午弄明白了怎麼不使用vue-cli的狀況下使用單文件組件（就是那個.vue文件）寫點小東西。也就是簡單的webpack + vue

------------------------------------------------------------------------------------------------------------- 

1.先準備一個空文件夾

2.初始化項目

npm init

3.對當前文件夾安裝webpack

// --save-dev開發環境
npm install --save-dev webpack

4.先看一下最終的目錄結構

紅色箭頭指向的是npm或webpack自動生成的，其餘的是我本身建立的

5.建立webpack.config.js

 1 const path = require('path');
 2 
 3 module.exports = {
 4     // 入口文件，咱們假設是單入口
 5     entry: {
 6         main: './src/index.js'
 7     },
 8     // 出口文件
 9     output: {
10         path: path.resolve(__dirname, './dist'),
11         filename: 'bundle.js'
12     },
13     module: {
14         // 當你import奇怪的後綴的時候webpack是看不懂的，他只認識js，因此須要一些奇怪的loader（加載器）
15         // 並且這些加載器要安裝，詳情見底下
16         rules: [
17             { test: /\.css$/, use: 'css-loader' },
18             { test: /\.ts$/, use: 'ts-loader' },
19             { test: /\.vue$/, use: 'vue-loader' },
20             { test: /\.less$/, use: 'less-loader' },
21         ]
22     },
23     devServer: {},
24     plugins: [],
25 }
26 
27 /*
28 使用loader前請先在項目中安裝對應的loader
29 例如：
30 npm install --save-dev css-loader vue-loader less-loader vue-template-compiler
31 npm install --save-dev ts-loader
32 常見loader：
33 1.模板:
34 
35 　(1)html-loader:將HTML文件導出編譯爲字符串，可供js識別的其中一個模塊
36 
37 　(2)pug-loader : 加載pug模板
38 
39 　(3)jade-loader : 加載jade模板(是pug的前身，因爲商標問題更名爲pug)
40 
41 　(4)ejs-loader : 加載ejs模板
42 
43 　(5)handlebars-loader : 將Handlebars模板轉移爲HTML
44 2.樣式:
45 
46 　(1)css-loader : 解析css文件中代碼
47 
48 　(2)style-loader : 將css模塊做爲樣式導出到DOM中
49 
50 　(3)less-loader : 加載和轉義less文件
51 
52 　(4)sass-loader : 加載和轉義sass/scss文件
53 
54 　(5)postcss-loader : 使用postcss加載和轉義css/sss文件
55 3.腳本轉換編譯:
56 
57 　(1)script-loader : 在全局上下文中執行一次javascript文件，不須要解析
58 
59 　(2)babel-loader : 加載ES6+ 代碼後使用Babel轉義爲ES5後瀏覽器才能解析
60 
61 　(3)typescript-loader : 加載Typescript腳本文件
62 
63 　(4)coffee-loader : 加載Coffeescript腳本文件
64 4.JSON加載:
65 
66 　(1)json-loader : 加載json文件（默認包含）
67 
68 　(2)json5-loader : 加載和轉義JSON5文件
69 5.Files文件
70 
71 　(1)raw-loader : 加載文件原始內容(utf-8格式)
72 
73 　(2)url-loader : 多數用於加載圖片資源,超過文件大小顯示則返回data URL
74 
75 　(3)file-loader : 將文件發送到輸出的文件夾並返回URL(相對路徑)
76 
77 　(4)jshint-loader : 檢查代碼格式錯誤
78 6.加載框架:
79 
80 　(1)vue-loader : 加載和轉義vue組件，這個彷佛還須要安裝vue-template-compiler
81 
82 　(2)angualr2-template--loader : 加載和轉義angular組件
83 
84 　(3)react-hot-loader : 動態刷新和轉義react組件中修改的部分,基於webpack-dev-server插件需先安裝,而後在webpack.config.js中引用react-hot-loader
85 */

 6.在./src/建立index.js

vue.js是vue的源文件，https://vuejs.org/js/vue.js

 1 import Vue from './assert/vue.js';
 2 import Name from './componments/name.vue';
 3 
 4 var vm = new Vue({
 5     el: '#app',
 6     data: {
 7         msg: '你好'
 8     },
 9     components: {
10         'myname': Name,
11     }
12 });

7.在./src/components下創一個name.vue

 1 <template>
 2     <div><h2>{{msg}}</h2></div>
 3 </template>
 4 
 5 <script>
 6 export default {
 7     data: function() {
 8         return {
 9             msg: 'Bob'
10         }
11     }
12 };
13 </script>
14 
15 
16 <style>
17     h2 {
18         color: red;
19     }
20 </style>

8.在命令行裏輸入"webpack --watch"

這個watch能夠不用再輸命令

9.最終效果

10.但願對你有幫助