使用webpack手動(dòng)搭建vue項(xiàng)目的步驟
一、前提條件
在開始以下步驟之前需先安裝好nodejs環(huán)境（最好直接安裝nvm，然后再通過nvm管理node版本），如未安裝，可參考：http://www.dhdzp.com/article/272933.htm
二、手動(dòng)搭建vue項(xiàng)目的步驟：
1. 創(chuàng)建項(xiàng)目
執(zhí)行以下命令：
mkdir vue-demo cd vue-demo
如圖所示：
2. 生成package.json文件
執(zhí)行以下命令：
npm init
如圖所示，此時(shí)能看到有生成package.json文件：
3. 引入webpack和創(chuàng)建webpack.config.js文件
執(zhí)行以下命令：
npm install webpack --save-dev
如圖所示：
然后，創(chuàng)建webpack.config.js文件：
const path = require('path')
module.exports = {
entry:'./src/main.js',
output: {
path: path.resolve(__dirname,'dist'),
filename: "demo.js"
}
}如圖所示：
4. 創(chuàng)建index.html，main.js文件
index.html文件內(nèi)容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-webpack-demo</title>
</head>
<body>
<script src="./dist/demo.js"></script>
</body>
</html>
創(chuàng)建src文件夾，在文件夾下創(chuàng)建main.js文件，內(nèi)容如下：
alert('hello world');如圖所示：
5. 使用webpack命令編譯
此時(shí)，順便安裝webpack-cli?？梢娔夸浂嗔艘粋€(gè)dist文件夾下面包含demo.js文件。內(nèi)容如下所示：
6. 引入vue2，修改index.html，main.js文件
執(zhí)行以下命令：
npm install vue@2.x.x
如圖所示：
執(zhí)行命令后能發(fā)現(xiàn)package.json中自動(dòng)新增了以下內(nèi)容：
修改main.js內(nèi)容如下：
import Vue from 'vue'
var vm = new Vue({
el:'#app',
data:{
msg:'hello vue'
}
})在index.html中加入msg
7. 引入babel
執(zhí)行以下命令：
npm install --save-dev babel-core babel-loader
將babel加入到webpack.config.js配置文件中
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/
}
]
}如圖所示：
8. 再次執(zhí)行webpack命令，完成搭建
關(guān)于提示“The ‘mode’ option has not been set”,可在webpack.config.js中設(shè)置為開發(fā)模式：
此時(shí)在瀏覽器打開index.html報(bào)以下錯(cuò)誤：
這是因?yàn)檎谑褂玫氖莢ue的運(yùn)行時(shí)版本，而此版本中的編譯器時(shí)不可用的，我們需要把它切換成運(yùn)行時(shí) + 編譯的版本，需要在配置文件中添加以下代碼：
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
}
}如圖所示：
再次運(yùn)行webpack 命令重新編譯，然后再在瀏覽器打開index.html文件：
此時(shí)，一個(gè)基于webpack的vue 項(xiàng)目就搭建好。
三、Webpack的常用配置：
1.HtmlWebpackPlugin插件(復(fù)制index.html)。
作用：
編譯時(shí)自動(dòng)在dist的目錄中創(chuàng)建一個(gè)html文件并將index.html中的內(nèi)容復(fù)制過去。
執(zhí)行以下命令用以引入插件：
npm install --save-dev html-webpack-plugin
在webpack.config.js文件中添加如下配置：
const HtmlWebpackPlugin = require('html-webpack-plugin')
…
plugins:[
new HtmlWebpackPlugin()
]位置如下：
執(zhí)行webpack命令再次編譯，將自動(dòng)在dist目錄下生成html文件：
對(duì)比原本自己寫的index.html，可知少了以下內(nèi)容：
接下來可通過修改配置文件來解決這個(gè)問題：
plugins:[
new HtmlWebpackPlugin({
title: "vue demo",
template: "index.html"
})
]刪掉dist文件夾下index.html的script代碼后再次編譯，得到新的index.html文件如下：
2.webpack-dev-server插件(實(shí)時(shí)加載)
作用：
提供了一個(gè)簡單的web服務(wù)器，能夠?qū)崟r(shí)重新加載。無須在瀏覽器中直接打開文件（我們實(shí)際開發(fā)中將代碼部署在 server中，而不是在瀏覽器中直接打開文件。）。
執(zhí)行以下命令：
npm install --save-dev webpack-dev-server
在webpack.config.js文件中添加如下配置，以告知webpack-dev-server， 在localhost:8080 下建立服務(wù)，將 dist 目錄下的文件，作為可訪問文件。：
devServer: {
static: path.resolve(__dirname,'static')
}位置如下：
在package.json中添加一個(gè)script腳本以直接運(yùn)行開發(fā)服務(wù)器（dev server）
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server --open",
"build": "webpack"
},位置如下：
執(zhí)行npm run dev命令：
此時(shí)，瀏覽器將會(huì)自動(dòng)打開頁面，這證明已經(jīng)成功啟動(dòng)服務(wù)：
3. css加載器(css-loader和style-loader)
執(zhí)行以下命令安裝css-loader和style-loader：
npm install --save-dev css-loader style-loader
在 webpack.config.js 中進(jìn)行如下配置：
module:{
rules:[
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}具體位置如下：
在src 目錄下新建一個(gè)styles的文件夾并在里面添加一個(gè)main.css的文件,寫上以下內(nèi)容：
#app{
color: red;
}
然后在main.js文件中引入css
再次執(zhí)行npm run dev命令，頁面上的字體樣式將會(huì)變化：
4. 圖片資源和字體的加載
說明：
url-loader是基于file-loader的封裝，故需引入file-loader。url-loader解決圖片較多時(shí)過多http請(qǐng)求導(dǎo)致頁面性能降低的問題，將引入的圖片編碼，生成dataURl。相當(dāng)于把圖片數(shù)據(jù)翻譯成一串字符,再把這串字符打包到文件中，最終只需要引入這個(gè)文件就能訪問圖片了。
執(zhí)行以下命令：
npm install --save-dev file-loader url-loader
在配置文件添加以下內(nèi)容：
{
test:/\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
esModule: false
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000
}
}
位置如下：
在src 目錄下新建一個(gè)images的文件夾并在里面添加圖片
然后在main.js中引入
import logo from'./images/logo.png'
接著在index.html中使用
刷新頁面可見已經(jīng)能看到圖片：
5. vue-loader
說明：
在vue的開發(fā)過程中，通常我們需要寫.vue結(jié)尾的文件即組件，這類文件需要通過 vue-loader 來加載，vue-template-compiler來編譯。
執(zhí)行以下命令：
npm install --save-dev vue-loader@15.9.8 vue-template-compiler
在webpack.config.js文件中添加：
const { VueLoaderPlugin } = require('vue-loader')
…
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
…
plugins:[
new VueLoaderPlugin()
]修改index.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-webpack-demo</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>在src文件夾下新建app.vue文件，內(nèi)容如下：
<template>
<div id="app">
<img src="./images/logo.png" alt="logo">
{{msg}}
</div>
</template>
<script>
export default {
name: 'app',
data(){
return {
msg: '嘗試vue頁面是否能打開了'
}
}
}
</script>
<style scoped>
img{
width: 100px;
height: 100px;
}
</style>修改main.js:
import Vue from 'vue'
import './styles/main.css'
import App from './app.vue'
var vm = new Vue({
el: '#app',
template: '<App/>',
components: { App }
})運(yùn)行npm run dev，瀏覽器頁面內(nèi)容將會(huì)更新：
6. 熱重載
說明：
“熱重載”不只是當(dāng)你修改文件的時(shí)候簡單重新加載頁面。啟用熱重載后，當(dāng)你修改 .vue 文件時(shí)，該組件的所有實(shí)例將在不刷新頁面的情況下被替換。手動(dòng)設(shè)置工程時(shí)，熱重載會(huì)在啟動(dòng) webpack-dev-server --hot 服務(wù)時(shí)自動(dòng)開啟。
修改package.json：
到此這篇關(guān)于從零使用webpack手動(dòng)搭建vue項(xiàng)目的文章就介紹到這了,更多相關(guān)webpack搭建vue項(xiàng)目內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了使用vue和element-ui上傳圖片及視頻文件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue利用路由鉤子token過期后跳轉(zhuǎn)到登錄頁的實(shí)例
下面小編就為大家?guī)硪黄猇ue利用路由鉤子token過期后跳轉(zhuǎn)到登錄頁的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
vue 通過 mqtt 實(shí)現(xiàn)實(shí)時(shí)接收消息的操作方法
?MQTT是一種基于發(fā)布/訂閱模式的輕量級(jí)消息協(xié)議,適用于硬件性能有限的遠(yuǎn)程設(shè)備和網(wǎng)絡(luò)狀況不佳的環(huán)境,這篇文章主要介紹了vue 通過 mqtt 實(shí)現(xiàn)實(shí)時(shí)接收消息,需要的朋友可以參考下2024-12-12
本文主要介紹了vite構(gòu)建項(xiàng)目并支持微前端，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
element-plus的el-table自定義表頭篩選查詢功能實(shí)現(xiàn)
這篇文章主要介紹了element-plus的el-table自定義表頭篩選查詢功能實(shí)現(xiàn),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-07-07
徹底搞懂并解決vue-cli4中圖片顯示的問題實(shí)現(xiàn)
這篇文章主要介紹了徹底搞懂并解決vue-cli4中圖片顯示的問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
vue實(shí)現(xiàn)移動(dòng)端省市區(qū)選擇
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端省市區(qū)選擇，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
最近公司在研發(fā)app,選擇了基于Vue框架的vux組件庫，現(xiàn)總結(jié)在實(shí)現(xiàn)上拉刷新功能遇到的坑,感興趣的朋友參考下吧2018-02-02
解決vue-cli創(chuàng)建項(xiàng)目的loader問題
下面小編就為大家分享一篇解決vue-cli創(chuàng)建項(xiàng)目的loader問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看看吧2018-03-03
Vue過濾器（filter）實(shí)現(xiàn)及應(yīng)用場景詳解
在Vue中使用過濾器（Filters）來渲染數(shù)據(jù)是一種很有趣的方式,下面這篇文章主要給大家介紹了關(guān)于Vue過濾器（filter）實(shí)現(xiàn)及應(yīng)用場景的相關(guān)資料,需要的朋友可以參考下2021-06-06