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

 

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

posted @ 2019-04-08 17:40  Cynthia-milk  阅读(3297)  评论(0编辑  收藏