使用webpack手動搭建vue項目的步驟
一、前提條件
在開始以下步驟之前需先安裝好nodejs環(huán)境（最好直接安裝nvm，然后再通過nvm管理node版本），如未安裝，可參考：http://www.dbjr.com.cn/article/272933.htm
二、手動搭建vue項目的步驟：
1. 創(chuàng)建項目
執(zhí)行以下命令：
mkdir vue-demo cd vue-demo
如圖所示：
2. 生成package.json文件
執(zhí)行以下命令：
npm init
如圖所示，此時能看到有生成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命令編譯
此時，順便安裝webpack-cli?？梢娔夸浂嗔艘粋€dist文件夾下面包含demo.js文件。內(nèi)容如下所示：
6. 引入vue2，修改index.html，main.js文件
執(zhí)行以下命令：
npm install vue@2.x.x
如圖所示：
執(zhí)行命令后能發(fā)現(xiàn)package.json中自動新增了以下內(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中設置為開發(fā)模式：
此時在瀏覽器打開index.html報以下錯誤：
這是因為正在使用的是vue的運行時版本，而此版本中的編譯器時不可用的，我們需要把它切換成運行時 + 編譯的版本，需要在配置文件中添加以下代碼：
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
}
}如圖所示：
再次運行webpack 命令重新編譯，然后再在瀏覽器打開index.html文件：
此時，一個基于webpack的vue 項目就搭建好。
三、Webpack的常用配置：
1.HtmlWebpackPlugin插件(復制index.html)。
作用：
編譯時自動在dist的目錄中創(chuàng)建一個html文件并將index.html中的內(nèi)容復制過去。
執(zhí)行以下命令用以引入插件：
npm install --save-dev html-webpack-plugin
在webpack.config.js文件中添加如下配置：
const HtmlWebpackPlugin = require('html-webpack-plugin')
…
plugins:[
new HtmlWebpackPlugin()
]位置如下：
執(zhí)行webpack命令再次編譯，將自動在dist目錄下生成html文件：
對比原本自己寫的index.html，可知少了以下內(nèi)容：
接下來可通過修改配置文件來解決這個問題：
plugins:[
new HtmlWebpackPlugin({
title: "vue demo",
template: "index.html"
})
]刪掉dist文件夾下index.html的script代碼后再次編譯，得到新的index.html文件如下：
2.webpack-dev-server插件(實時加載)
作用：
提供了一個簡單的web服務器，能夠?qū)崟r重新加載。無須在瀏覽器中直接打開文件（我們實際開發(fā)中將代碼部署在 server中，而不是在瀏覽器中直接打開文件。）。
執(zhí)行以下命令：
npm install --save-dev webpack-dev-server
在webpack.config.js文件中添加如下配置，以告知webpack-dev-server， 在localhost:8080 下建立服務，將 dist 目錄下的文件，作為可訪問文件。：
devServer: {
static: path.resolve(__dirname,'static')
}位置如下：
在package.json中添加一個script腳本以直接運行開發(fā)服務器（dev server）
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server --open",
"build": "webpack"
},位置如下：
執(zhí)行npm run dev命令：
此時，瀏覽器將會自動打開頁面，這證明已經(jīng)成功啟動服務：
3. css加載器(css-loader和style-loader)
執(zhí)行以下命令安裝css-loader和style-loader：
npm install --save-dev css-loader style-loader
在 webpack.config.js 中進行如下配置：
module:{
rules:[
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}具體位置如下：
在src 目錄下新建一個styles的文件夾并在里面添加一個main.css的文件,寫上以下內(nèi)容：
#app{
color: red;
}
然后在main.js文件中引入css
再次執(zhí)行npm run dev命令，頁面上的字體樣式將會變化：
4. 圖片資源和字體的加載
說明：
url-loader是基于file-loader的封裝，故需引入file-loader。url-loader解決圖片較多時過多http請求導致頁面性能降低的問題，將引入的圖片編碼，生成dataURl。相當于把圖片數(shù)據(jù)翻譯成一串字符,再把這串字符打包到文件中，最終只需要引入這個文件就能訪問圖片了。
執(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 目錄下新建一個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 }
})運行npm run dev，瀏覽器頁面內(nèi)容將會更新：
6. 熱重載
說明：
“熱重載”不只是當你修改文件的時候簡單重新加載頁面。啟用熱重載后，當你修改 .vue 文件時，該組件的所有實例將在不刷新頁面的情況下被替換。手動設置工程時，熱重載會在啟動 webpack-dev-server --hot 服務時自動開啟。
修改package.json：
到此這篇關(guān)于從零使用webpack手動搭建vue項目的文章就介紹到這了,更多相關(guān)webpack搭建vue項目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
今天小編就為大家分享一篇關(guān)于vue里頁面的緩存詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了詳解vue3.0 diff算法的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
這篇文章主要介紹了淺談Vue組件單元測試究竟測試什么，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
這篇文章主要介紹了詳解vuejs之v-for列表渲染，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要為大家介紹了vue3實現(xiàn)數(shù)字滾動特效實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
淺析Vue.js中v-bind v-model的使用和區(qū)別
v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定,所謂雙向綁定。這篇文章主要介紹了Vue.js中v-bind v-model的使用和區(qū)別,需要的朋友可以參考下2018-12-12
分頁組件是一種用戶界面元素,用于在長列表或數(shù)據(jù)集中分割內(nèi)容,分頁組件是每個開發(fā)人員必須掌握的一個組件,廣泛應用在各個場所,用以用戶方便閱讀等,本文就給大家介紹一下如何基于vue寫出的分頁組件,需要的朋友可以參考下2023-08-08
下面小編就為大家?guī)硪黄獀ue2.X組件學習心得(新手必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
vue計算屬性無法監(jiān)聽到數(shù)組內(nèi)部變化的解決方案
今天小編就為大家分享一篇vue計算屬性無法監(jiān)聽到數(shù)組內(nèi)部變化的解決方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要給大家介紹了關(guān)于vue3父組件調(diào)用子組件的方法例子,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2023-07-07