vue+webpack搭建項目基礎架構

時間 2019-12-11

標籤 vue+webpack vue webpack 搭建項目基礎架構欄目系統架構简体版

原文原文鏈接

初始咱們先模擬vue-cli新建這幾個文件，而後經過webpack打包讓其成功輸出Hello World！結構以下：html

index.html——打包的html模版文件vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Vue and Webpack</title>
</head>
<body>
    <!--頁面掛載點-->
    <div id="app"></div>
</body>
</html>

通常來講，index.html是經過script標籤直接引入main.js的，可是webpack打包以後會自動將其引入，因此這裏不用寫jquery

main.js——打包的js入口文件webpack

import Vue from 'vue';
import App from './App.vue';

/*new Vue({
    el:'#app',
    components:{App},
    template:'<App/>'
})*/
//另外一種寫法
new Vue({
    render:h => h(App)
}).$mount('#app');

講解一：$mount是一個vue的全局函數，表示將構建出來的組件掛載到dom對象上。因此 .$mount('#app') 其實就至關於 el: '#app'。詳細的介紹轉官網。es6

講解二：render是字符串模板（template:'<App/>'）的代替方案，容許你發揮 JavaScript 最大的編程能力。詳細介紹轉官網。web

App.vue——總的組件入口vue-router

<template>
    <div id="app">
        {{msg}}
    </div>
</template>
<script>
    export default{
        name:'app',
        data(){
            return {
                msg:'Hello World!'
            }
        }
    }
</script>

接下來開始配置webpackvue-cli

第一步安裝webpacknpm

首先咱們init一下，一直回車就ok。而後會看到多了一個package.json文件編程

npm init

接着,安裝webpack，這裏由於用的webpack4+，因此把webpack-cli也安裝上，--save-dev是把版本號添加到package.json配置文件中

npm install --save-dev webpack webpack-cli

第二步新建一個文件webpack.config.js，先配置好入口entry、出口output

//webpack.config.js
const path = require('path');

const config = {
    //開發狀態下
    mode: 'development',
    //入口
    entry:'./src/main.js',
    //出口，表示將文件打包完後輸出到dist文件夾下，名字叫bundle.js
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'dist')
    }
}

module.exports = config;

接下來，咱們須要什麼就安裝什麼。先羅列一下用到的，這裏是最簡單的

vue——必須安裝啊
vue-loader——解析.vue的插件
vue-template-compiler——解析文件裏template模版的插件，必須有啊，沒有就報錯
html-webpack-plugin——打包時編譯html的插件
webpack-dev-server——起服務、熱更新的插件

若是須要用到es六、sass、jquery、圖片等能夠看個人其餘兩篇webpack的文章，都有介紹到。

vue

npm install vue --save-dev

main.js

import Vue from 'vue';

webpack.config.js

若是使用vue-loader加載.vue文件時（組件文件），webpack在打包對模板進行了渲染，就須要Runtime版本。從Compiler版本修改成Runtime版本：

resolve: {
    alias: { 'vue': 'vue/dist/vue.js' } 
},

vue-loader、vue-template-compiler

npm install vue-loader vue-template-compiler --save-dev

配置文件中webpack.config.js

const {VueLoaderPlugin} = require('vue-loader');

module:{
    rules:[
        {
            test:/\.vue$/,
            loader:'vue-loader'
        }
    ]
},
plugins:[
    new VueLoaderPlugin()
],

html-webpack-plugin

npm install html-webpack-plugin --save-dev

webpack.config.js

plugins:[
    new HtmlWebpackPlugin({
        filename:'index.html',//文件名稱
        template:'./index.html',//模版文件，我們這裏也就只有index.html
        hash:true
    })
],

webpack-dev-server

npm install webpack-dev-server --save-dev

webpack.config.js

//服務
devServer:{
   　//啓用 webpack 的模塊熱替換特性
     hot:true
},

package.json

"scripts": {
    "watch": "webpack --watch",
    "start": "webpack-dev-server --open",
    "build": "webpack"
},

接下來就是見證奇蹟的時刻

npm start

默認打開8080，瀏覽器成功呈現Hello World!

若是想看打包後的文件，運行

npm run build

項目結構變成

dist就是打包後的文件夾，也是項目上線時往服務器上丟的代碼

webpack.config.js代碼

//引入插件
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {VueLoaderPlugin} = require('vue-loader');

const config = {
    mode: 'development',
    entry:'./src/main.js',
    //服務
    devServer:{
        //啓用 webpack 的模塊熱替換特性
        hot:true
    },
    module:{
        rules:[
            {
                test:/\.vue$/,
                loader:'vue-loader'
            }
        ]
    },
    //從Compiler版本修改成Runtime版本
    resolve: {
        alias: { 'vue': 'vue/dist/vue.js' } 
    },
    plugins:[
        new HtmlWebpackPlugin({
            filename:'index.html',
            template:'./index.html',
            hash:true
        }),
        new VueLoaderPlugin()
    ],
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'dist')
    }
}

module.exports = config;