webpack4.5.0+vue2.5.16+vue-loader 實戰組件化開發案例以及版本問題中踩的一些大坑!!!

時間 2019-11-20

標籤 webpack4.5.0+vue2.5.16+vue webpack vue loader 實戰組件開發案例以及版本問題一些大坑简体版

原文原文鏈接

一 vue-loadercss

咱們先無論腳手架,只說vue-loader,簡單講就是可將.vue文件打包,實現組件化開發,即一個.vue文件就是一個組件,開發中只須要引入這個.vue組件就能夠了!html

而後.vue文件的特性:vue

,node

即一個.vue中包含了模板,js,css三個模塊來描述這個組件!webpack

二新建webpack項目(超級多坑,一一來講)es6

首先新建demo目錄,初始化 npm init --yes,而後安裝webpack和webpack-dev-server,由於我這裏沒有指定版本,因此直接安裝了最新的4.5.0版本,致使有許多配置的坑!,而後創建項目結構,以下圖:web

,vue-router

而後安裝一些必要的組件:npm

vue-loader@14.2.2 ,這個我在實踐中先安裝的8.5.4,而後一直報錯沒法讀取'vue',文件錯誤顯示是vue-loader/lib下面的js,根據經驗確定是版本不對致使了,json

這個時候兩種解決辦法:

一要麼修改webpack的版本,

二要麼修改vue-loader的版本

這裏我採用修改vue-loader的版本,親測若是是webpack@4.5.0,vue-loader@14.2.2.其餘版本基本所有報錯,真是坑!

而後就是其餘的laoder:

,而後還有一點,若是是想用import的話還要安裝babel:

最後--save安裝vue,注意前面的最好都要--save-dev安裝,而後再安裝html-webpack-plugin插件便於html打包

三 webpack配置

配置以下:

const path=require('path')
const htmlPlugin=require('html-webpack-plugin')
module.exports={
    entry:{
        entry:'./src/index.js' //入口文件
    },
    output:{
        path:path.resolve(__dirname,'dist'),//dist的絕對路徑,node的語法
        filename:'./js/[name].js',   //打包後的js文件名
    },
    resolve: {
        extensions: [ '.js', '.vue'],  //同時打包.vue文件
        alias:{
            'vue$':'vue/dist/vue.js'    //啓用別名,這樣能夠直接引用 'vue'
        }
    },
    module:{
        rules:[
            //配置vue-loader,以,vue結尾的文件都使用vue-loader打包
            {
                test:/\.vue$/,
                use:{
                    loader:'vue-loader'
                }
            },
            //配置babel,全部.js文件使用babel轉換
            {
                test:/\.js$/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:[
                            "es2015"  //解析es6
                        ]
                    }
                },
                //排除插件安裝目錄
                exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//
            }
        ]
    },
    //html打包插件
    plugins:[
        new htmlPlugin({
            hash:true,
            template:'./src/index.html'
        })
    ],
    devServer:{
        //監聽服務的路徑,3.6以上版本自動熱更新
        contentBase:path.resolve(__dirname,'dist'),
        host:'localhost',
        compress:true,
        port:8082
    }
}

配置完成以後,新建.vue組件文件,而後簡單寫個例子:

這裏有個坑:

不能直接寫123,template標籤裏面必須寫一個元素標籤包裹,不然會報錯

新建以後再引入,index.js入口文件以下:

import Vue from 'vue'
import App from './App.vue'   //引入,vue組件
new Vue({
    el:'#vue',
    data:{
        msg:'haha'
    },
    components:{
        'app':App   //引入模塊化的.vue文件的組件
    }
});
{
    alert(123);
}

這裏還有另外一個坑,引入vue的時候如今這個版本好像不能直接'vue',而是'vue/dist/vue.js',除非在配置文件中配置別名,我上面已經配置過了,因此這裏能夠直接使用別名

,而後新建html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>vue</title>
    </head>
    <body>
        <div id="vue">
                {{msg}}
            <app></app>
        </div>
    </body>
</html>

,最後打包進行觀察結果,發現.vue已經能成功使用,若是咱們還想要一個組件,能夠繼續新建.vue組件開發,一個組件就是一個模塊!拋開腳手架不說,這種開發方式和思想值得細細品味,哈哈!這個簡單例子就到這裏,其餘的css樣式什麼的能夠本身去嘗試!

另外說一點,webpack3.6以上的版本會自動支持熱更新,不須要其餘配置,4.0以上版本,打包和運行命令多了一個--mode選項,並且是必須寫:

即如今package.json的命令裏我是這樣配置的:

"scripts": {

　　"server": "webpack-dev-server --mode development --open",

　　"build": "webpack --mode development"

npm run server 直接運行

npm run build; 打包!

運行結果: