手把手教你使用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
简单的配置就已经搞定啦,你学会了吗
