一丟丟學習之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

const path = require('path');

module.exports = {
    // 入口文件，我們假設是單入口
    entry: {
        main: './src/index.js'
    },
    // 出口文件
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    },
    module: {
        // 當你import奇怪的后綴的時候webpack是看不懂的，他只認識js，所以需要一些奇怪的loader（加載器）
        // 而且這些加載器要安裝，詳情見底下
        rules: [
            { test: /\.css$/, use: 'css-loader' },
            { test: /\.ts$/, use: 'ts-loader' },
            { test: /\.vue$/, use: 'vue-loader' },
            { test: /\.less$/, use: 'less-loader' },
        ]
    },
    devServer: {},
    plugins: [],
}

/*
使用loader前請先在項目中安裝對應的loader
例如：
npm install --save-dev css-loader vue-loader less-loader vue-template-compiler
npm install --save-dev ts-loader
常見loader：
1.模板:

　(1)html-loader:將HTML文件導出編譯為字符串，可供js識別的其中一個模塊

　(2)pug-loader : 加載pug模板

　(3)jade-loader : 加載jade模板(是pug的前身，由於商標問題改名為pug)

　(4)ejs-loader : 加載ejs模板

　(5)handlebars-loader : 將Handlebars模板轉移為HTML
2.樣式:

　(1)css-loader : 解析css文件中代碼

　(2)style-loader : 將css模塊作為樣式導出到DOM中

　(3)less-loader : 加載和轉義less文件

　(4)sass-loader : 加載和轉義sass/scss文件

　(5)postcss-loader : 使用postcss加載和轉義css/sss文件
3.腳本轉換編譯:

　(1)script-loader : 在全局上下文中執行一次javascript文件，不需要解析

　(2)babel-loader : 加載ES6+ 代碼后使用Babel轉義為ES5后瀏覽器才能解析

　(3)typescript-loader : 加載Typescript腳本文件

　(4)coffee-loader : 加載Coffeescript腳本文件
4.JSON加載:

　(1)json-loader : 加載json文件（默認包含）

　(2)json5-loader : 加載和轉義JSON5文件
5.Files文件

　(1)raw-loader : 加載文件原始內容(utf-8格式)

　(2)url-loader : 多數用於加載圖片資源,超過文件大小顯示則返回data URL

　(3)file-loader : 將文件發送到輸出的文件夾並返回URL(相對路徑)

　(4)jshint-loader : 檢查代碼格式錯誤
6.加載框架:

　(1)vue-loader : 加載和轉義vue組件，這個似乎還需要安裝vue-template-compiler

　(2)angualr2-template--loader : 加載和轉義angular組件

　(3)react-hot-loader : 動態刷新和轉義react組件中修改的部分,基於webpack-dev-server插件需先安裝,然后在webpack.config.js中引用react-hot-loader
*/

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

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

import Vue from './assert/vue.js';
import Name from './componments/name.vue';

var vm = new Vue({
    el: '#app',
    data: {
        msg: '你好'
    },
    components: {
        'myname': Name,
    }
});

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

<template>
    <div><h2>{{msg}}</h2></div>
</template>

<script>
export default {
    data: function() {
        return {
            msg: 'Bob'
        }
    }
};
</script>


<style>
    h2 {
        color: red;
    }
</style>

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

這個watch可以不用再輸命令

9.最終效果

10.希望對你有幫助