溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹怎么在webpack中搭建一個vue項目，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
前期準備
webpack
vue.js
npm
nodejs
ES6語法
創建項目
mkdir vue-demo cd vue-demo
使用 npm init 命令 生成package.json文件
npm init
大概生成的package.json 如下:
{
"name": "vue-demo",
"version": "1.0.0",
"description": "this is a vue demo",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"license": "ISC",
"dependencies": {
}
}引入webpack ，關于如何使用webpack 請參考官網
npm install webpack --save-dev
如果使用npm下載的速度過慢，可以使用淘寶的cnpm 鏡像
npm install -g cnpm –registry=https://registry.npm.taobao.org
輸入以上命令即可將npm指向國內鏡像，使用時需將npm 替換成cnpm即可， 其他不變
在項目中創建webpack.config.js 文件
const path = require('path')
module.exports ={
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:"demo.js"
}
}使用webpack 命令編譯
webpack
編譯之后的項目目錄大概如下:
注意：在使用webpack命令之前 需先創建 index.html 和 main.js 文件 其中 main.js文件位于src 目錄下
index.html 的內容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue demo</title> </head> <body> <script src="./dist/demo.js"></script> </body> </html>
main.js 的內容如下
alert('hello world');引入vue
npm install vue --save
執行命令后會在package.json中新增如下代碼
"dependencies": { "vue": "^2.4.2" }
將main.js中的內容修改為如下代碼
import Vue from 'vue'
var vm = new Vue({
el:'#app',
data:{
msg:'hello vue'
}
})引入babel
npm install --save-dev babel-core babel-loader
由于在使用vue時會用到很多es6的語法，但是現在很多瀏覽器對es6的支持不是很好，所以在編譯時需要將這些語法轉換es5的語法，此時我們使用babel來進行編譯。
babel的使用請閱讀官網文檔http://babeljs.cn/。
將babel加入到webpack.config.js 配置文件中：
const path = require('path')
module.exports ={
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:"demo.js"
},
module:{
rules:[
{
test: /\.js$/,
loader:"babel-loader",
exclude: /node_modules/
}
]
}
}然后命令行輸入 webpack 命令即可進行編譯，再編譯完成后用瀏覽器打開index.html 文件，此時會發現瀏覽器控制臺出現以下錯誤：
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. (found in <Root>)
這是因為正在使用的是vue的運行時版本，而此版本中的編譯器時不可用的，我們需要把它切換成運行時 + 編譯的版本，需要在配置文件中添加如下代碼
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
}
}此時在運行webpack 命令重新編譯，編譯后在訪問index.html頁面，頁面內容如下圖
此時一個基于webpack的vue 項目就搭建好。
webpack的一些常用配置
在項目的實際開發中我們還會引入css、圖片以及字體等資源文件。這些文件的引入都需要相應的加載器才能將其加載到項目中并正常使用。
下面只介紹部分我們需要的加載器的使用方法, 更多信息請查閱webpack加載器文檔。
css加載器
我們需要引入css-loader、和style-loader (安裝style-loader的目的是為了在html中以style的方式嵌入css )。
執行命令
npm install --save-dev css-loader style-loader
在 webpack.config.js 中進行如下配置
module: {
rules: [{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/
}, {
test: /\.css$/,
loader: 'style-loader!css-loader'
}]
},然后再src 目錄下 新建一個styles的文件夾并在里面添加一個main.css的文件,寫上以下內容
#app{
color:red;
}然后再運行 webpack 命令, 并重新加載index.html 文件 ,可見css已經生效,效果如下圖
圖片資源的加載
使用file-loader或者url-loader加載器進行加載，他們都是用于打包文件和圖片資源的，兩者的區別是url-loader在file-loader的基礎上進行了一次封裝。
在訪問網站時如果圖片較多，會發很多http請求，會降低頁面性能。這個問題可以通過url-loader解決。url-loader會將引入的圖片編碼，生成dataURl。相當于把圖片數據翻譯成一串字符,再把這串字符打包到文件中，最終只需要引入這個文件就能訪問圖片了。
當然，如果圖片較大，編碼會消耗性能。因此url-loader提供了一個limit參數，小于limit字節的文件會被轉為DataURl，大于limit的還會使用file-loader進行copy。
此處我們使用url-loader,由于它是基于file-loader的封裝，所以也需要引入file-loader。
npm install --save-dev file-loader url-loader
webpack.config.js 的rules 中增加如下配置
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000
}
}接下來就是將圖片引入到代碼中，需要在main.js和index.html 分別作如下修改:
main.js
import Vue from 'vue'
import './styles/main.css'
import logo from'./images/logo.png'
var vm = new Vue({
el:'#app',
data:{
logo:logo,
msg:'hello vue'
}
})index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue demo</title>
</head>
<body>
<div id="app">
<img :src="logo" alt="logo" class="logo">
{{msg}}
</div>
<script src="./dist/demo.js"></script>
</body>
</html>最后運行webpack 命令并訪問 index.html ，結果如下
在測試中發現當圖片大于10KB的時候發現加載圖片失敗，找不到圖片，但此時在dist目錄下面是能看到已經通過加載器加載成功了的圖片，再通過瀏覽器的開發者工具對圖片的引用路徑進行檢查時，可以發現頁面中img的路徑不對，路徑中只有文件名缺失了前面的dist目錄,所以此時我們需要將main.js中的代碼進行如下修改
logo:"./dist/"+logo,
重新編譯后圖片就顯示出來了。但是現在新的問題又出來了，由于我們在配置文件中配置了小于10kb的代碼將以 base64的形式內聯在代碼中。所以此時是不需要 "./dist" 這個前綴的。 解決此問題有兩種辦法：
不使用base64的形式將圖片內嵌到代碼中
將html文件放到dist目錄中 既然用了url-loader加載器則不推薦使用第一種。所以我們使用第二種方式。
將html文件放到dist目錄中最簡單的辦法就是把index.html文件復制到dist目錄中，然后將引入就是的代碼改為：
<script src="./demo.js" > </script>
main.js中改回原來的設置
logo:logo,
重新編譯后圖片在兩種情況下都可以加載出來了。
還有一中比較常用的方式是在編譯時自動在dist的目錄中創建一個html文件并將index.html中的內容復制過去。此時我們需要時webpack的 HtmlWebpackPlugin 插件。
HtmlWebpackPlugin 插件
引入插件
npm install --save-dev html-webpack-plugin
webpack.config.js 中增加如下配置
const HtmlWebpackPlugin = require('html-webpack-plugin')
...
plugins:[
new HtmlWebpackPlugin()
]重新編譯后發現在dist目錄下生成了如下內容的html的文件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Webpack App</title> </head> <body> <script type="text/javascript" src="demo.js"></script></body> </html>
與我們原來自己的寫index.html相比，該文件缺少了下面這些這些內容
<div id="app">
<img :src="logo" alt="logo" class="logo">
{{msg}}
</div>現在需要對配置文件做稍微的修改，讓html文件在創建的時候自動將index.html的中內容復制過去。通過查閱該插件的文檔，可知需做如下修改：
plugins:[
new HtmlWebpackPlugin({
title: 'vue demo',
template: 'index.html'
})
]index.html 文件中 去除 script代碼，在重新編譯后，即可獲取我們需要的html文件
詳細參數配置請參考官方文檔
webpack-dev-server
在我們實際開發中需要將代碼部署在server中，而不是在瀏覽器中直接打開文件。此時我們需要使用webpack的 webpack-dev-server 。
webpack-dev-server 為我們提供了一個簡單的web服務器，并且能夠實時重新加載（live reloading）。
npm install --save-dev webpack-dev-server
在webpack.config.js 文件中需要指定一個文件夾,告訴開發服務器需要從哪兒加載文件
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: "demo.js"
},
plugins: [
new HtmlWebpackPlugin({
title: 'vue demo',
template: 'index.html'
})
],
devServer:{
contentBase:"./dist"
},
module: {
rules: [{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/
}, {
test: /\.css$/,
loader: 'style-loader!css-loader'
}, {
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
}
}
}上面紅色字體的配置信息是告知webpack-dev-server， 在localhost:8080 下建立服務，將 dist 目錄下的文件，作為可訪問文件。
讓我們在package.json中添加一個script腳本,可以直接運行開發服務器(dev server)：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server --open",
"build": "webpack"
},然后輸入如下命令
npm run dev
啟動完成后，瀏覽器會自動打開一個訪問 http://localhost:8080/ 的頁面
此時服務已啟動成功。
字體的加載
字體的加載方式與圖片的一樣也是用url-loader，配置如下
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000
}
}vue-loader
在vue的開發過程中，通常我們需要寫.vue結尾的文件即組件，如app.vue
<template>
<div id="app">
<img src="./images/logo2.jpg" alt="logo" >
{{msg}}
</div>
</template>
<script>
export default {
name:'app',
data(){
return {
msg:"hello vue !!"
}
}
}
</script>該文件需要通過vue-loader來進行加載，現在我們需要做如下配置。通過 vue-loader 和vue-template-compiler來加載并編譯.vue文件
npm install --save-dev vue-loader vue-template-compiler
webpack.config.js 中
{
test: /\.vue$/,
loader: 'vue-loader'
}為了在vue中引入對.vue的使用，我們需進行如下修改
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue demo</title> </head> <body> <div id="app"> </div> </body> </html>
main.js
import Vue from 'vue'
import './styles/main.css'
import App from './app.vue'
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})app.vue
<template>
<div id="app">
<img src="./images/logo.png" alt="logo" >
{{msg}}
</div>
</template>
<script>
export default {
name:'app',
data(){
return {
msg: 'hello vue !!'
}
}
}
</script>修改完成后 運行 npm run dev 命令 ，獲得如下效果的頁面
熱部署
在上一步中，如果我們修改app.vue文件中的msg的參數，可以看到頁面會自動刷新。但是此時是頁面全局刷新的，如果我們只想局部刷新即只刷新修改的部分，需要使用webpack的HotModuleReplacementPlugin插件，在webpack.config.js的plugins中添加下面的信息:
new webpack.HotModuleReplacementPlugin()
然后去package.json中，script 里面dev的值中加上 --hot -only
"dev": "webpack-dev-server --hot-only --open",
然后重啟服務，再修改 msg 的值，會發現此時值的改變是局部刷新的。
生產環境
如果我們在瀏覽器的控制臺中發現有如下提示
意思時說項目現在運行在開發環境中，在部署到正式環境下時，要確保它是處于production的模式。需要將代碼打包部署到生產環境時需要進行如下配置：
var webpack = require('webpack')
module.exports = {
// ...
plugins: [
// ...
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]}關于怎么在webpack中搭建一個vue項目就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
