手把手教你使用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');

const HtmlWebpackPlugin=require('html-webpack-plugin');

const VueLoaderPlugin=require('vue-loader/lib/plugin');

module.exports={

mode:'production',

output:{

path:path.resolve(__dirname,'./../dist'),

filename:'bundle.min.js'

},

plugins:[

new HtmlWebpackPlugin({

template:'index.html'

}),

new VueLoaderPlugin()

]

}

总的配置文件

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

简单的配置就已经搞定啦,你学会了吗