使用webpack 4打包項目 --- 進階篇之vue

使用webpack 4打包項目 — 進階篇之vue

在進行這一步之前我已經配置好了一些基礎的配置如：自動編譯打包，loader，出入口文件等，想看這個部分的可以參考這兩篇文章

使用webpack 4打包項目—基礎篇

使用webpack 4打包項目—進階篇之loader

這篇文章主要講解webpack配合vue項目的使用。

webpack 結合 vue

首先我們需要先下載vue

npm i vue -S

但是這個vue包和我們平常在網頁中使用的vue包不一樣，這個是一個閹割版的，就會導致部分網頁中語法不能使用，那麼在項目中我們應該怎麼使用vue呢？

在項目中,我們要使用文件組件的形式，這個時候我們需要創建.xxx.vue的文件寫入組件

例如：

App.vue

<template>

</template>

<script>
export default {
    
}
</script>

<style lang="" scoped>
    
</style>

template中寫入我們的模板 ，script中寫入js代碼， style中是我們的樣式 lang可以指定樣式的語言css/less/scss ,scoped表示這裏的 樣式只在我們當前組件生效，注意css樣式也是需要我們預先裝好對應的loader的。

在我們的main.js中我們需要引入Vue和App.js

import Vue from 'vue'

import App from './app.vue'

const vm = new Vue({
    el: '#app',
    data: {
        msg: '123'
    },
    render: c => c(App)
})

這種模式下我們的組件不在使用components，而是使用render，這個和components也是有區別的，render 會替換掉 #app 這個的div包括裏面的所有內容。

vue-loader

webpack同樣也無法打包我們的.vue文件我也需要裝對應的loader

cnpm i vue-loader vue-template-compiler -D 

vue-loader就是處理.vue文件的。

vue-template-compiler，會預編譯您的template模版，生成javascript可執行函數。運行時不需要模版編譯，加快應用運行時間。

同樣我們需要在webpack.config.js做出如下配置

const path = require('path')

const htmlWebpackPlugins = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    entry: path.join(__dirname, './src/main.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    mode: 'development',
    devServer: {
        open: true,
        port: 3000,
        hot: true
    },
    plugins: [
        new htmlWebpackPlugins({
            template: path.join(__dirname, './src/index.html'),
            filename: 'index.html'
        }),
        //請確保引入這個插件！
        new VueLoaderPlugin()

    ],
    module: {
        rules: [
            //配置處理.css文件第三方loader規則
            {
                test: /\.css/,
                use: ['style-loader', 'css-loader'],
                exclude: /node_modules/,

            },

            {
                test: /\.(jpg|png|gif|jpeg|bmp|PNG)$/,
                use: 'url-loader?limit=12170&name=[hash:8]-[name].[ext]',
                
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-proposal-class-properties']
                    }
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    }
}

VueLoaderPlugin 這個插件是必須的！ 它的職責是將你定義過的其它規則複製並應用到 .vue 文件裏相應語言的塊。例如，如果你有一條匹配 /.js$/ 的規則，那麼它會應用到 .vue 文件裏的

這裏面的配置的loader都是很有必要的，因爲我們的vue項目中，不僅有js文件還有樣式文件和圖片，字體等需要url的，我們還會用到一些es6+ 的語法，所以這些loader都是很有必要的。

這裏我的package.json中的包

  "dependencies": {
    "@babel/core": "^7.9.6",
    "@babel/preset-env": "^7.9.6",
    "babel-loader": "^8.1.0",
    "vue": "^2.6.11",
    "vue-router": "^3.1.6"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "css-loader": "^3.5.3",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.3.0",
    "less": "^3.11.1",
    "less-loader": "^6.1.0",
    "style-loader": "^1.2.1",
    "url-loader": "^4.1.0",
    "vue-loader": "^15.9.2",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },

vue-router

當然在vue項目中我們還會經常用到路由。這項目中使用vue-router和在單文件中使用略有不同。

import VueRouter from 'vue-router'
import router from './router.js'

Vue.use(VueRouter)

const vm = new Vue({
    el: '#app',
    data: {
        msg: '123'
    },
    render: c => c(App),
    router
})

我們需要導包，然後註冊到Vue上。這裏我們可以抽取出來一個router.js專門寫路由，例如：

import VueRouter from 'vue-router'

import Login from './login.vue'
import Register from './register.vue'

const routes = [
    { path: '/login', component: Login},
    { path: '/register', component: Register }
]

const router = new VueRouter({
    routes
})

export default router

這我們的webpack配置的vue項目基本就差不多了，最後我們要打包發佈的話，在package.json中的scripts中加上"build": "webpack -p"即可，如圖：

npm run build 打包發佈了，當然這個與實際的開發中的打包發佈還是有差距的。