欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-31 17:07:52
我们在使用vue开发项目的时候,都是用vue-cli直接来搭建的.但是这是别人已经造好的*,我们既然要使用别人造好的*,我们总不能知其然而不知其所以然.所以呢,我这边文章就教你如何使用webpack一步一步搭建起vue-cli框架, 首先,第一步呢,肯定是要安装webpack啦 安装webpac ......

我们在使用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

 

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