59.Vue 使用webpack構建vue項目

時間 2021-08-14

標籤 css html vue node webpack es6 web chrome npm json 欄目 CSS 简体版

原文原文鏈接

前言

在前面的篇章中，已經說明了 webpack4 的基本使用，那麼本章節開始在 webpack4 中構建vue項目，同時對比看看這種構建方式，與在網頁script導入 vue.js 中的區別。css

構建webpack項目開發

首先從新構建webpack項目。html

初始化項目文件結構

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

image-20200312074244099

初始化 package.json 文件

package.json 使用存儲記錄 npm 安裝相關包版本便可的。執行如下命令進行初始化：vue

npm init -y

執行以下：node

image-20200312074427333

安裝webpack

安裝webpack工具至本地項目中：webpack

npm i -D webpack webpack-cli

在項目根目錄建立、編寫配置文件 webpack.config.js

image-20200312075615058

const path = require('path');

// 這個配置文件，起始就是一個 JS 文件，經過 Node 中的模塊操做，向外暴露了一個 配置對象
module.exports = {
// 在配置文件中，須要手動指定 入口 和 出口
entry: path.join(__dirname, './src/main.js'),// 入口，表示，要使用 webpack 打包哪一個文件
output: { // 輸出文件相關的配置
path: path.join(__dirname, './dist'), // 指定 打包好的文件，輸出到哪一個目錄中去
filename: 'bundle.js' // 這是指定 輸出的文件的名稱
    },
};

通常來講，如今就能夠執行 webpack 命令進行打包了，可是我在上面將 webpack 安裝到本地項目中，因此還須要編寫 npm 執行內部命令的腳本，纔可以執行。es6

在 package.json 配置執行本地 webpack 執行命令

image-20200312075856551

  "scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
  },

好了，配置了這個以後，就可使用 npm run 腳本名稱來執行了，執行以下：web

npm run build

image-20200312080049049

能夠看到已經能夠成功編輯打包出 bundle.js 壓縮文件了。chrome

編寫main.js打印信息，設置 index.html 引用 bundle.js 腳本

首先在main.js 寫一個打印信息，以下：npm

image-20200312080315055

console.log("hello world");

而後在index.html引入bundle.js，以下：json

image-20200312080625550

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

<script src="../dist/bundle.js"></script>

</body>
</html>

安裝babel

安裝babel至本地項目中：

npm i -D babel-loader @babel/core

爲了轉化 es6 代碼，要安裝 babel 插件:

npm i -D @babel/preset-env @babel/polyfill

安裝防止全局污染babel插件

npm i -D @babel/plugin-transform-runtime
npm i -S @babel/runtime @babel/runtime-corejs2

注意：使用 -D 也就是 --save-dev，將其安裝好測試開發環境，而 -S 也就是 --save ，將其安裝到生產環境的依賴中。

在根目錄下建立 babel 配置文件 .babelrc:

image-20200312082729082

{
"presets": ["@babel/preset-env"],
"plugins": [
    [
"@babel/plugin-transform-runtime",
      {
"corejs": 2,
"helpers": true,
"regenerator": true,
"useESModules": false
      }
    ]
  ]
}

注意："corejs": 2, // 這裏設置2是由於上面安裝的版本是 @babel/runtime-corejs2

配置webpack.config.js設置使用babel的規則

image-20200312082908900

module: {
rules: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}

在main.js中寫入ES6語法，查看打印信息

在安裝babe將ES6\ES7轉化低於語法ES5以前，我先通過測試，發現使用ES6的語法在chrome瀏覽器是可以支持運行的，而在IE則會報語法錯誤，以下：

main.js 代碼以下：

image-20200312083055873


// ES5
console.log("hello world es5");

// ES6
class Bar {
    doStuff() {
console.log('stuff bar');
    }
}

var b = new Bar();
b.doStuff(); // "stuff"

// ES6
class Foo {
static classMethod() {
return 'hello static foo';
    }
}

console.log(Foo.classMethod()); // 'hello'

執行npm run build打包編譯一下，看看 ie瀏覽器可否識別打印高級語法的信息，以下：

image-20200312084020364

安裝webpack-dev-server

安裝webpack-dev-server至本地項目：

npm i webpack-dev-server -D

運行webpack-dev-server命令

在package.json的scripts編寫執行命令，以下：

 "scripts": {
"dev": "webpack-dev-server"
  },

啓動了server服務以後，輸入文件的路徑修改成 / 根路徑

啓動執行服務以下：

npm run dev

image-20200312231921160

修改 index.html 引入 bundle.js 的路徑，而且刪除dist目錄下的bundle.js 文件

image-20200312232132579

訪問http://localhost:8080/src/

image-20200312232236866

webpack-dev-server的經常使用命令參數

image-20200312232529354

"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"

-- open : 設置啓動服務自動打開瀏覽器

--port 端口號：配置服務啓動端口號

--contentBase src: 啓動服務設置index.html的所在目錄

--hot：設置採用補丁的方式熱更新

使用html-webpack-plugin插件配置啓動頁面

前面在配置生成bundle.js的使用時候，已經將其存儲在內存中編譯生成。那麼能不能將index.html頁面也加載存儲到內存中呢？

這個固然能夠，可使用html-wabpack-plugin插件來完成這部分工做。

安裝html-wabpack-plugin插件

npm i html-webpack-plugin -D

在webpack.config.js配置文件中配置

image-20200312233125296

const path = require('path');

// 導入在內存中生成 HTML 頁面的 插件
// 只要是插件，都必定要 放到 plugins 節點中去
// 這個插件的兩個做用：
//  1\. 自動在內存中根據指定頁面生成一個內存的頁面
//  2\. 自動，把打包好的 bundle.js 追加到頁面中去
const htmlWebpackPlugin = require('html-webpack-plugin');

// 這個配置文件，起始就是一個 JS 文件，經過 Node 中的模塊操做，向外暴露了一個 配置對象
module.exports = {
// 在配置文件中，須要手動指定 入口 和 出口
entry: path.join(__dirname, './src/main.js'),// 入口，表示，要使用 webpack 打包哪一個文件
output: { // 輸出文件相關的配置
path: path.join(__dirname, './dist'), // 指定 打包好的文件，輸出到哪一個目錄中去
filename: 'bundle.js' // 這是指定 輸出的文件的名稱
    },
devServer: { // 這是配置 dev-server 命令參數的第二種形式，相對來講，這種方式麻煩一些 //  --open --port 3000 --contentBase src --hot
open: true, // 自動打開瀏覽器
port: 3000, // 設置啓動時候的運行端口
contentBase: 'src', // 指定託管的根目錄
hot: true // 啓用熱更新
    },
plugins: [ // 配置插件的節點
new htmlWebpackPlugin({ // 建立一個 在內存中 生成 HTML  頁面的插件
template: path.join(__dirname, './src/index.html'), // 指定 模板頁面，未來會根據指定的頁面路徑，去生成內存中的 頁面
filename: 'index.html' // 指定生成的頁面的名稱
        })
    ],
module: {
rules: [
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
        ]
    }
};

啓動服務，發現bundle.js被自動引入

image-20200312233247458

這個插件的兩個做用：

自動在內存中根據指定頁面生成一個內存的頁面
自動，把打包好的 bundle.js 追加到頁面中去

使用webpack打包css文件

安裝style-loader css-loader工具，用於處理css文件

npm i style-loader css-loader -D

在webpack.config.js這個配置文件設置匹配css文件處理的插件

 { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //  配置處理 .css 文件的第三方loader 規則

image-20200312233535053

使用webpack打包less文件

安裝less-loader less工具來處理less文件

npm i less-loader less -D

在webpack.config.js配置文件設置匹配less文件的處理

{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置處理 .less 文件的第三方 loader 規則

image-20200312233742750

使用webpack打包sass文件

安裝sass-loader node-sass工具來處理sass文件

cnpm i sass-loader node-sass -D
cnpm i sass fiber -D

在webpack.config.js配置文件設置匹配scss文件的處理

{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 配置處理 .scss 文件的 第三方 loader 規則

webpack 中 url-loader 的使用

安裝url-loader

cnpm i url-loader file-loader -D

在webpack.config.js中添加處理url路徑的loader模塊：

{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=500&name=[hash:8]-[name].[ext]' },

上面這種輸入參數的方式還有另外一種方式，以對象的鍵值對方式，以下：

{
test: /\.(jpg|png|gif|bmp|jpeg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 500,   //是把小於500B的文件打成Base64的格式，寫入JS
name: '[hash:8]-[name].[ext]' // [hash:8] 在名稱前面設置8位哈希值，[name] 設置文件的原名, [ext] 設置文件的原後綴
        }
    }]
},// 處理 圖片路徑的 loader

image-20200312234328889

區分webpack中導入vue和普通網頁使用script導入Vue的區別

上面已經構建好了webpack的基本使用組件，那麼下面能夠開始在webpack中開始探討使用vue的方法。

那麼首先來回顧一下普通網頁使用script導入vue的過程，以下：

使用 script 標籤，引入 vue 的包
在 index 頁面中，建立一個 id 爲 app div 容器
經過 new Vue 獲得一個 vm 的實例

經過這三個步驟，咱們就能夠開始 vue 開發了。可是在webpack中也是這樣麼？

安裝vue庫

首先在項目本地安裝 vue 庫先，以下：

cnpm i vue -S

將vue安裝到生產依賴中，執行以下：

image-20200312235724746

在webpack嘗試導入vue 以及建立 vm

1. 上面安裝完畢vue庫以後，下面在main.js嘗試導入 vue，以下：

// 導入vue
import Vue from 'vue'

2.建立vm實例

// 建立vm
var vm = new Vue({
el: '#app',
data: {}
});

image-20200313000436386

3.在index.html建立app容器

image-20200313001123873

4.在vm的data中設置一個msg值，而後在app中渲染看看

「main.js 以下：」

image-20200313001259475

「index.html 渲染數據以下：」

image-20200313001332174

啓動服務查看是否正常渲染效果，以下：

image-20200313001432954

vue.runtime.esm.js:620 [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.

這裏提示使用 vue.runtime.esm.js 只會構建運行時的 vue 代碼，沒法使用模板編譯。提示可使用 render 方法返回組件，或者使用內置的編譯器構建。

5.問題的根本緣由：

在 webpack 中，使用 import Vue from 'vue' 導入的 Vue 構造函數，功能不完整，只提供了 runtime-only 的方式，並無提供像網頁中那樣的使用方式；

那麼若是想要使用網頁script直接導入的方式，這時候就須要導入完整的 Vue 功能的js。那麼這個完整的 Vue 功能 js 其實就是須要在 nodemodules 裏面去查找。

「包的查找規則」：

1.找項目根目錄中有沒有「node_modules」的文件夾

2.在「node_modules」中根據包名，找對應的「vue」文件夾

3.在「vue」文件夾中，找一個叫作「package.json」的包配置文件

4.在「package.json」文件中，查找一個「main」屬性【main屬性指定了這個包在被加載時候的入口文件】

image-20200313074617634

這說明當 import 這個庫的時候，則會導入 main屬性指定的文件。

若是須要想要完整的功能，應該是要導入完整的 vue.js ，以下：

image-20200313074819161

6.修改導入vue庫的方式，使其支持完整功能

若是想要修改導入vue的 js，有兩種方式，

第一種就是直接在 vue 庫的package.json中main中修改引入的文件，

第二種則是 import 的時候直接手寫引入的文件路徑。

先來看看第一種，以下：

將原來引入的代碼

  "main": "dist/vue.runtime.common.js",
"module": "dist/vue.runtime.esm.js",

改成

  "main": "dist/vue.min.js",
"module": "dist/vue.min.js",

image-20200313080326838

此時，再來編譯服務，能夠看到瀏覽器正常渲染數據了。

image-20200313080448628

可是通常來講，咱們不會修改庫的文件方式。下面來看看第二種，再次以前將庫文件的main屬性改回去。

第二種方式：

image-20200313080817760

此時查看編譯後可否查看渲染數據，以下：

image-20200313080904325

能夠看到也能夠正常如同網頁 script 引入同樣渲染數據了。

可是若是將導入vue寫成這樣路徑寫法:

import Vue from '../node_modules/vue/dist/vue.min.js'

看上去很是不優雅，可否依然是寫成

import Vue from 'vue'

可是又不修改vue庫的main屬性，又能夠導入實際vue.min.js完整功能的腳本呢？

此時就要使用resolve屬性來設置導入庫別名 alias 了。

7.在webpack.config.js中添加resolve屬性：

首先將導入包的方式改回去，以下：

image-20200313081516536

在webpack.config.js添加resolve屬性，以下：

image-20200313081650308

    resolve: {
alias: {
'vue$': 'vue/dist/vue.min.js'
        }
    }

再次編譯運行服務，確認是否模板渲染正常，能夠發現也是能夠正常渲染的。

總結區別

從上面的過程當中能夠發現webpack默認導入vue的話，導入的是run-time-only的非完整js，而咱們在普通網頁中使用的，通常導入完整的vue庫文件。

若是須要修改使用模板渲染的功能，那麼只能修改一下vue導入的文件了。

在vue中結合render函數渲染指定的組件到容器中

那麼是否存在我依然使用run-time-only的vue庫，依然能夠將組件渲染到 app容器的方式呢？

這個固然有，就是使用render函數。

爲了演示效果，咱們先將上面設置的alias註釋，改回使用run-time-only庫。

image-20200313083255631

下面來建立一個login組件，而後將其渲染到容器中。

1.建立login組件

// 建立login組件
var login = {
template: "<h1>這是login組件。</h1>"  
};

2.首先按照完整功能的方式註冊到vm中，而後在index.html中使用組件，查看可否正常

main.js 中註冊組件login

image-20200313083536510

index.html 中使用組件login

image-20200313083626270

啓動服務，查看可否正常顯示，以下：

image-20200313083717640

3.將login組件寫到 login.vue 文件中，而後使用render函數來渲染組件

在上面的示例看到，使用run-time-only 的 vue，沒法使用模板直接在 vm 中渲染組件。那麼下面咱們抽離 login 組件出來到 login.vue 文件中，而後使用 render 來返回渲染 login 組件。看看效果。

3.1 編寫 login.vue 文件

image-20200314163106051

<template>
<div>
<h1>這是login登陸組件</h1>
</div>
</template>

<script>
</script>

<style>

</style>

能夠看到 vue 文件主要分爲了三部分：template 、script、 style

那麼下面先來看看若是直接看成組件導入會是什麼效果。

3.2 導入login組件

image-20200314163337769

那麼下面啓動服務，看看頁面，以下：

image-20200314163450829

3.3 安裝編譯vue文件的插件

默認webpack是沒法編譯vue文件的，須要安裝相關的插件。

「安裝命令：」

npm i vue-loader vue-template-compiler -D
npm i vue-loader-plugin -S

執行以下：

image-20200314163840735

image-20200314164612923

「在webpack.config.js中，添加以下module規則：」

image-20200314163953290

{ test: /\.vue$/, use: 'vue-loader' }, // 配置處理 .vue 文件

「還要配置插件：」

image-20200314164836876

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
// ...
plugins: [
new VueLoaderPlugin()
  ]
}

再次編譯，此時已經沒有報錯了，頁面只是提示runtime-only的告警信息，以下：

image-20200314164937065

3.4 使用render函數渲染組件

image-20200314165749702

    // 使用render函數渲染組件
render: function (createElements) {
return createElements(login)
    }

此時網頁看看是否成功渲染組件，以下：

image-20200314165831851

能夠看到已經成功渲染組件了。

下面簡寫一下render函數，以下：

image-20200314165942875

    // 使用render函數渲染組件
render: c => c(login)

總結

總結梳理：webpack 中如何使用 vue :

1.安裝vue的包：cnpm i vue -S
2.因爲在 webpack 中，推薦使用 .vue 這個組件模板文件定義組件，因此，須要安裝能解析這種文件的

npm i vue-loader vue-template-compiler -D
npm i vue-loader-plugin -S

3.在 main.js 中，導入 vue 模塊 import Vue from 'vue'
4.定義一個 .vue 結尾的組件，其中，組件有三部分組成：template script style
5.使用 import login from './login.vue' 導入這個組件
6.建立 vm 的實例 var vm = new Vue({ el: '#app', render: c => c(login) })
7.在頁面中建立一個 id 爲 app 的 div 元素，做爲咱們 vm 實例要控制的區域；

「更多精彩原創Devops文章，快來關注個人公衆號：【Devops社羣】吧：」

image

點擊下面，查看更多Vue系列文章

相關標籤/搜索

webpack+vue+vue

vue+webpack+vue

idea2016+vue+webpack+vue

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。