搜尋
首頁web前端js教程在webpack上如何建構vue項目
在webpack上如何建構vue項目Jun 14, 2018 pm 05:57 PM
vue.jswebpack搭建

這篇文章主要介紹了webpack搭建vue 專案的步驟,現在分享給大家,也給大家做個參考。

前期準備

  1. webpack

  2. #vue.js

  3. ##npm

  4. nodejs

  5. ES6語法

#由於本文內容是透過npm來載入vue,所以開始之前需安裝nodejs環境,安裝完成之後再執行以下步驟:

建立專案

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(&#39;hello world&#39;);

引入vue

npm install vue --save

執行指令後會在package.json中新增以下程式碼

"dependencies": { "vue": "^2.4.2" }

將main.js中的內容修改為如下程式碼

import Vue from &#39;vue&#39;
var vm = new Vue({
 el:&#39;#app&#39;,
 data:{
  msg:&#39;hello vue&#39;
 }
})

引入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(&#39;path&#39;)

module.exports ={
 entry:&#39;./src/main.js&#39;,
 output:{
  path:path.resolve(__dirname,&#39;dist&#39;),
  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: {
  &#39;vue$&#39;: &#39;vue/dist/vue.esm.js&#39; // &#39;vue/dist/vue.common.js&#39; 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: &#39;style-loader!css-loader&#39;
  }]
 },

然後再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: &#39;url-loader&#39;,
 options: {
  limit: 10000
 }
}

接下來就是將圖片引入到程式碼中,需要在main.js和index.html 分別作如下修改:

main.js

import Vue from &#39;vue&#39;
import &#39;./styles/main.css&#39;
import logo from&#39;./images/logo.png&#39;

var vm = new Vue({
 el:&#39;#app&#39;,
 data:{
  logo:logo,
  msg:&#39;hello vue&#39;
 }
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue demo</title>
</head>
<body>
 <p id="app">
  <img class="logo lazy"  src="/static/imghwm/default1.png"  data-src="logo"  : alt="logo" >
  {{msg}}
 </p>
 <script src="./dist/demo.js"></script>
</body>
</html>

最後執行webpack 指令並存取index.html ,結果如下

在测试中发现当图片大于10KB的时候发现加载图片失败,找不到图片,但此时在dist目录下面是能看到已经通过加载器加载成功了的图片,再通过浏览器的开发者工具对图片的引用路径进行检查时,可以发现页面中img的路径不对,路径中只有文件名缺失了前面的dist目录,所以此时我们需要将main.js中的代码进行如下修改

logo:"./dist/"+logo,

重新编译后图片就显示出来了。但是现在新的问题又出来了,由于我们在配置文件中配置了小于10kb的代码将以 base64的形式内联在代码中。所以此时是不需要 "./dist" 这个前缀的。 解决此问题有两种办法:

  1. 不使用base64的形式将图片内嵌到代码中

  2. 将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(&#39;html-webpack-plugin&#39;)
...

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相比,该文件缺少了下面这些这些内容

<p id="app">
  <img class="logo lazy"  src="/static/imghwm/default1.png"  data-src="logo"  : alt="logo" >
  {{msg}}
 </p>

现在需要对配置文件做稍微的修改,让html文件在创建的时候自动将index.html的中内容复制过去。通过查阅该插件的文档,可知需做如下修改:

plugins:[
  new HtmlWebpackPlugin({
   title: &#39;vue demo&#39;,
   template: &#39;index.html&#39;   
  })
]

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(&#39;path&#39;)
const HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;)

module.exports = {
  entry: &#39;./src/main.js&#39;,
  output: {
    path: path.resolve(__dirname, &#39;dist&#39;),
    filename: "demo.js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: &#39;vue demo&#39;,
      template: &#39;index.html&#39;
    })
  ],
  devServer:{
    contentBase:"./dist"
  },
  module: {
    rules: [{
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      }, {
        test: /\.css$/,
        loader: &#39;style-loader!css-loader&#39;
      }, {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: &#39;url-loader&#39;,
        options: {
          limit: 10000
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: &#39;url-loader&#39;,
        options: {
          limit: 10000
        }
      }
    ]
  },
  resolve: {
    alias: {
      &#39;vue$&#39;: &#39;vue/dist/vue.esm.js&#39; // &#39;vue/dist/vue.common.js&#39; 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: &#39;url-loader&#39;,
  options: {
    limit: 10000
  }
 }

vue-loader

在vue的开发过程中,通常我们需要写.vue结尾的文件即组件,如app.vue

<template>
  <p id="app">
    <img src="/static/imghwm/default1.png"  data-src="./images/logo2.jpg"  class="lazy"   alt="logo" >
    {{msg}}
  </p>
</template>
<script>
  export default {
    name:&#39;app&#39;,
    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: &#39;vue-loader&#39;
 }

为了在vue中引入对.vue的使用,我们需进行如下修改

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue demo</title>
</head>
<body>
  <p id="app">
  </p>
</body>
</html>

main.js

import Vue from &#39;vue&#39;
import &#39;./styles/main.css&#39;
import App from &#39;./app.vue&#39;

new Vue({
  el: &#39;#app&#39;,
  template: &#39;<App/>&#39;,
  components: { App }
})

app.vue

<template>
  <p id="app">
    <img src="/static/imghwm/default1.png"  data-src="./images/logo.png"  class="lazy"   alt="logo" >
    {{msg}}
  </p>
</template>
<script>
  export default {
    name:&#39;app&#39;,
    data(){
      return {
        msg: &#39;hello vue !!&#39;
      }
    }
  }
</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(&#39;webpack&#39;)
module.exports = {
// ...
plugins: [
// ...
  new webpack.DefinePlugin({
    &#39;process.env&#39;: {
      NODE_ENV: &#39;"production"&#39;
    }
  }),
  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false
    }
  })
]}

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在Vue-cli中如何实现为单独页面设置背景色

在Vue中如何实现点击后文字变色

使用JS如何实现循环Nodelist Dom列表

以上是在webpack上如何建構vue項目的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
总结分享几个 VueUse 最佳组合,快来收藏使用吧!总结分享几个 VueUse 最佳组合,快来收藏使用吧!Jul 20, 2022 pm 08:40 PM

VueUse 是 Anthony Fu 的一个开源项目,它为 Vue 开发人员提供了大量适用于 Vue 2 和 Vue 3 的基本 Composition API 实用程序函数。本篇文章就来给大家分享几个我常用的几个 VueUse 最佳组合,希望对大家有所帮助!

5 款适合国内使用的 Vue 移动端 UI 组件库5 款适合国内使用的 Vue 移动端 UI 组件库May 05, 2022 pm 09:11 PM

本篇文章给大家分享5 款适合国内使用的 Vue 移动端 UI 组件库,希望对大家有所帮助!

聊聊Vue3+qrcodejs如何生成二维码并添加文字描述聊聊Vue3+qrcodejs如何生成二维码并添加文字描述Aug 02, 2022 pm 09:19 PM

Vue3如何更好地使用qrcodejs生成二维码并添加文字描述?下面本篇文章给大家介绍一下Vue3+qrcodejs生成二维码并添加文字描述,希望对大家有所帮助。

手把手带你利用vue3.x绘制流程图手把手带你利用vue3.x绘制流程图Jun 08, 2022 am 11:57 AM

利用vue3.x怎么绘制流程图?下面本篇文章给大家分享基于 vue3.x 的流程图绘制方法,希望对大家有所帮助!

Github 上 8 个不可错过的 Vue 项目,快来收藏!!Github 上 8 个不可错过的 Vue 项目,快来收藏!!Jun 17, 2022 am 10:37 AM

本篇文章给大家整理分享8个GitHub上很棒的的 Vue 项目,都是非常棒的项目,希望当中有您想要收藏的那一个。

如何使用VueRouter4.x?快速上手指南如何使用VueRouter4.x?快速上手指南Jul 13, 2022 pm 08:11 PM

如何使用VueRouter4.x?下面本篇文章就来给大家分享快速上手教程,介绍一下10分钟快速上手VueRouter4.x的方法,希望对大家有所帮助!

聊聊vue指令中的修饰符,常用事件修饰符总结聊聊vue指令中的修饰符,常用事件修饰符总结May 09, 2022 am 11:07 AM

本篇文章带大家聊聊vue指令中的修饰符,对比一下vue中的指令修饰符和dom事件中的event对象,介绍一下常用的事件修饰符,希望对大家有所帮助!

如何覆盖组件库样式?React和Vue项目的解决方法浅析如何覆盖组件库样式?React和Vue项目的解决方法浅析May 16, 2022 am 11:15 AM

如何覆盖组件库样式?下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法,希望对大家有所帮助!

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),