手把手教你使用webpack搭建vue框架

我們在使用vue開發項目的時候,都是用vue-cli直接來搭建的.但是這是別人已經造好的輪子,我們既然要使用別人造好的輪子,我們總不能知其然而不知其所以然.所以呢,我這邊文章就教你如何使用webpack一步一步搭建起vue-cli框架,

首先,第一步呢,肯定是要安裝webpack啦

安裝webpack

使用webpack的命令的話,一定要全局安裝一下webpack

npm install --global webpack

初始化項目

cnpm init

說明:

安裝中-D和-S的區別

-D，安裝包會在package中的  devDependencies對象中。簡稱dev。dev是在開發環境中要用到的。

-S後，安裝包會在package中的  dependencies  對象中。簡稱dep。dep是在生產環境中要用到的。

本地安裝

cnpm i webpack webpack -D

安裝好之後呢,我們需要構建webpack的配置文件,因為我們平時開發的時候,需要考慮到生產環境和開發環境,不同的環境的話,部分配置是不一樣的

目錄結構

 webpack-vue
  |- package.json
  |-config
        |-webpack-development.js
        |-webpack.production.js
  |-src
        |-App.vue
        |-components
        
        |-router
          |-index.js
        |-main.js
  |-webpack.config.js
  |-index.html　　　　　　　　

編寫配置文件

在編寫配置文件之前,我們肯定得要安裝各種模塊的啦

資源管理類的loader

cnpm i css-loader file-loader url-loader html-webpack-plugin less less-loader babel-loader @babel/core @babel/preset-env vue-loader vue-style-loader vue-template-compiler -D

* vue-loader :處理.vue文件

* vue-style-loader:處理.vue裡面的樣式

* vue-template-compiler:編譯.vue中template裡面的內容

安裝vue-router等

cnpm i vue-router axios vue-axios -S

在config文件下麵創建webpack-development.js和webpack.production.js兩個文件

webpack-development.js----->開發環境

const HtmlWebpackPlugin=require('html-webpack-plugin');
// vue-loader15.*之後的版本都必須要加上這個,否則會報錯
const VueLoaderPlugin=require('vue-loader/lib/plugin');
module.exports={
    mode:'development',
    output:{
        filename:'bundle.js'
    },
    devtool:'source-map',
    plugins:[
        new HtmlWebpackPlugin({
            template:'index.html'
        }),
        new VueLoaderPlugin()
    ]
}

webpack.production.js

總的配置文件

const path = require('path');
module.exports = function (env, argv) {
　　// env其實是在package中運行的命令是配置了
    env = env || {};
    return {
        entry: './src/main.js',
        module: {
            rules: [
                // 處理css
                {
                    test: /\.css$/i,
                    use: ['vue-style-loader', 'css-loader']
                },
                // 處理vue
                {
                    test: /\.vue$/i,
                    use: 'vue-loader'
                },
                // 處理less
                {
                    test: /\.less$/i,
                    use: ['vue-style-loader', 'css-loader', 'less-loader']
                },
                // 小圖片轉為base64
                {
                    test: /\.(png|jpg|gif)$/i,
                    use: [{
                        loader: 'url-loader',
                        options: {
                            limit: 8192
                        }
                    }]
                },
                // 處理es6
                {
                    test: /\.(js|jsx)$/i,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                },
                // 多媒體文件
                {
                    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                       
                    }
                },
                // 處理字體
                {
                    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        
                    }
                }
            ]
        },
        resolve: {
            extensions: ['.js', '.vue', '.json'],
            alias: {
                'vue': 'vue/dist/vue.esm',
                '@': path.resolve(__dirname, 'src/components')
            }
        },
        ...env.development ? require('./config/webpack-development') : require('./config/webpack.production')
    }
}

配置文件這一塊我們就已經搞定啦,開始搗鼓vue部分了

在src裡面創建main.js作為主的js文件,也是入口文件

import Vue from 'vue';
import router from './routers/'
import App from './App'
import Axios from  'axios';
import VueAxios from 'vue-axios';
Vue.use(VueAxios,Axios)
 let vm=new Vue({
     el:'#app',
     components:{
       App
     },
     router,
     template:`
         <App/>
     `
 })

App.vue

<template lang='html'>
    <div>
      <router-link :to="{ name: 'index', params: {} }">首頁</router-link>
        <router-link :to="{ name: 'news', params: {} }">新聞</router-link>
        <router-view/>
    </div>
</template>
<script>

export default {
    name:'app',
    data(){
        return{
            msg:'hello world'
        }
    },
    components:{

    }
}
</script>
<style lang="less" scoped>

</style>

既然都用到了路由,那麼我們項目中肯定是要對路由進行處理,建一個router文件夾,裡面創建index.js

import Vue from 'vue';
import Router from 'vue-router';
import Index from '@/index';
import News from '@/news';
Vue.use(Router);
export  default new Router({
    routes: [
        {
            path:'/',
            name:'index',
            component:Index
        },{
            path:'/news',
            name:'news',
            component:News
        }
    ]
})

說明:引入的話,不用我說明,已經在main.js中引入了

到這項目就已經基本搭好了,但是需要運行起來的話,我們還需要在package裡面配置一下

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --env.development --hot --port 8089 --open ",
    "build": "webpack --env.production"
  },

* --hot:熱更新

* --port:修改埠

* --open:自動在瀏覽器打開運行項目

啟動服務用的是webpack-dev-server,在最初配置文件中的env也是來自於這邊的命令,

// 開發環境
cnpm run start

// 生產環境
cnpm run build

簡單的配置就已經搞定啦,你學會了嗎