我們在使用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
簡單的配置就已經搞定啦,你學會了嗎