詳解如何使用webpack打包Vue工程

更新時間：2017年05月27日 11:12:25 作者：Gofice

本篇文章主要介紹了詳解如何使用webpack打包Vue工程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

使用webpack打包Vue工程

前言

入行一年，從什么都不懂的小白，到現(xiàn)在什么都懂一點的小白，也算是飛躍了。感嘆一下現(xiàn)在的前端，從nodejs出來到現(xiàn)在各種各樣的工具如雨后春筍般的出現(xiàn)。大神們瘋狂的造輪子，玩的不亦樂乎。我等小白們，瘋狂追趕，學的心肝脾肺都快衰竭。而我的精力也僅限淺嘗輒止，但是學多一點總有好處的。本篇文章就是介紹如何使用webpack構建前端工程。

目標

本次的工程以Vue.js為主角，Vue.js是一款小巧優(yōu)雅而且強大的輕量級mvvm框架，配合webpack模塊化打包。制作出如下圖的效果。僅僅搭一個框架，會用上很多插件和加載器。

環(huán)境準備

主要是一些全局的nodejs包

Nodejs
npm
webpack
less

sudo npm install webpack -g // -g 代表全局安裝webpack，調(diào)出命令行即可使用webpack命令
sudo npm install less -g   // -g 全局安裝 less to css 轉換器

開始

1. 初始化工程

創(chuàng)建工程文件夾 new 并定位到 new

mkdir new && cd new

使用npm初始化工程

npm init

根據(jù)需要設置項目的信息，也可以一路回車，使用默認信息，默認項目名稱為文件夾名（項目名稱不要設置成某個模塊名，否則將來你引用摸個模塊的時候會報錯）

name: (new) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: new
author: fz
license: (ISC) 


{
 "name": "gt",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [
  "new"
 ],
 "author": "fz",
 "license": "ISC"
}

Is this ok? (yes)

之后文件夾下會生成一個package.json,記錄了項目的詳細信息，包括了各種依賴和插件。

2. 創(chuàng)建目錄以及webpack配置文件

├── dist      // 編譯之后輸出文件的目錄
├── src       // 應用邏輯代碼存放區(qū)域
│  ├── lib    // 存放npm上找不到的第三方庫
│  │  ├── backbone.js
│  │  └── underscore.js
│  ├── static   // 存放靜態(tài)資源
│  │  └── logo.png
│  ├── app.html  // 部件模板
│  ├── app.js   // 部件代碼
│  └── app.less  // 部件樣式
├── index.html   // 應用首頁模板
├── index.js    // 應用入口
├── package.json  // 工程配置文件
└── webpack.config.js // webpack配置文件

現(xiàn)在的目錄結構，文件都是空白的，等一下把他們補上。

3. 安裝webpack各中模塊的loader（加載器）和插件以及我們需要的模塊

npm install --save less     // 本地按裝less
npm install --save less-loader  // less模塊的加載器，配合下面css-loader 和 style-loader
npm install --save css-loader  // css 模塊加載器
npm install --save style-loader // 以上兩個插件的根基
npm install --save url-loader  // 用來處理 圖片 字體 的模塊，是由下面file-loader封裝的?？勺远x文件名
npm install --save file-loader 
npm install --save html-loader  // 加載html文件用的
npm install --save text-loader  // 加載純文本用的
npm install --save html-webpack-plugin      // 生成html文件插件
npm install --save extract-text-webpack-plugin  // 單獨提取css文件插件
npm install --save webpack            // 提供webpack對象
npm install --save webpack-dev-server      // webpack-server開發(fā)包，方便調(diào)試
npm install --save vue
npm install --save jquery

4. 完成后的package.json

{
 "name": "new",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
  "dev": "webpack-dev-server --hot --inline",  // 用戶啟動 webpack-dev-server 用于用戶調(diào)試 --hot 代表熱替換 ， --inline 模式。。不太清楚。
  "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [
  "new"
 ],
 "author": "fz",
 "license": "ISC",
 "dependencies": {
  "bootstrap": "^3.3.6",
  "css-loader": "^0.23.1",
  "extract-text-webpack-plugin": "^1.0.1",
  "file-loader": "^0.9.0",
  "html-loader": "^0.4.3",
  "html-webpack-plugin": "^2.22.0",
  "jquery": "^2.1.4",
  "less": "^2.7.1",
  "less-loader": "^2.2.3",
  "style-loader": "^0.13.1",
  "text-loader": "0.0.1",
  "url-loader": "^0.5.7",
  "vue": "^1.0.26",
  "webpack": "^1.13.1",
  "webpack-dev-server": "^1.14.1"
 }
}

3. 編寫webpack.config.js配置文件

webpack配置文件比較復雜，需要做一下說明：webpack作為一款模塊打包器，其管理的單元就是模塊，webpack的模塊指的不僅僅是js，包括了樣式，圖片，字體，模板等等。不同的模塊需要相應的loader作為加載器進行加載。

var webpack = require('webpack');
var path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
var extractTextWebpackPlugin = require('extract-text-webpack-plugin');

引入必要的插件和模塊

module.exports = {
  entry: {
    "index": "./index.js",
    "common": ['vue', 'jquery', 'underscore', 'backbone']
  },

entry 顧名思義就是入口，他是程序的入口，但它同時也是chunk（代碼塊）構造器。構造有兩種方式，上面一種，通過文件內(nèi)require的模塊關系，將文件打包成chunk。下面一種意思就是組成這個chunk的是這幾個模塊（backbone，underscore等三方模塊的定義在下面， vue，jQuery，可以直接通過npm安裝）。

這個配置會編譯出兩個文件，一個當作公共庫使用，一個當作網(wǎng)站入口使用。

  output: {
    path: './dist',    
    publicPath: '/path/',   
    filename: '[name].[hash].js'  
  },

很明顯，這里是輸出文件控制

path: 輸出編譯后文件路徑
publicPath: 在html-webpack-plugin中，中引入腳本的根目錄。（生成）
filename: 輸出文件名，[name]的意思就是原來chunk代碼塊叫什么名字就是什么名字，[hash]，文件的哈希值。

例如: 入口文件名叫index，那么它的輸出就是index.d87f87sd6fsdgs76gsd967.js

  module: {
    loaders: [
      {
        test: /\.less$/,
        loader: 'style-loader!css-loader!less-loader'
      },
      {
        test: /\.less$/,
        loader: extractTextWebpackPlugin.extract("style-loader", "css-loader!less-loader")
        // 配合‘extract-text-webpack-plugin'可以剝離，css
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.(png|jpg|gif|woff|woff2|ttf|eot|svg)$/,
        loader: 'url-loader?limite=8192'  // limit 是轉換base64的文件大小的閥值8兆
      },
      {
        test: /\.html$/,
        loader: 'html-loader'  // 可以用來加載模板
      }
    ]
  },

module 這部分，我不是很了解，只知道這里可以用于loader定義。loaders是一個數(shù)組。

test: 定義加載模塊的文件名正則表達式
loader: 定義加載模塊的加載器

加載器可以多個配合使用，典型的就是style css less，邏輯還是很清晰的，less 轉 css 轉樣式模塊，然后文檔。

  resolve: {
    root: [
      path.resolve(__dirname, 'src/lib')
    ],
    extensions: ['', '.js'],
    alias: {
      'underscore': 'underscore.js',
      'backbone': 'backbone.js',
    }
  },

解析模塊功能，用來解析三方模塊和一些require不方便的模塊。

root: 模塊搜索路徑數(shù)組，告訴webpack從哪里去找模塊。我這里定義了一個src/lib路徑，我把一些庫放在這個路徑下面。引用的時候，可以直接require(‘underscore.x.x.x.js’);不必加路徑。
extensions: 拓展名，設置擴展名后，可以require(‘underscore’)，不必加.js，這里一定要設置，否則，webpack-dev-server 會報錯。
alias: 經(jīng)過上面的設置，已經(jīng)可以隨心所欲引入三方模塊了，但是我覺得使用別名的方式更好，更方便管理。在文件中引用公共庫的時候避免使用路徑的方式，例如require(‘../../lib/ssssss.js’)。在別名中定義好即可。

 plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common',
      filename: '[name].[hash].js',
      chunks: ['index', 'common']  // extract commonChunk from index & common
    }),
    new htmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html',
      chunks: ['index', 'common']
    }),
    new webpack.ProvidePlugin({
      jQuery: "jquery"
    }),
    new webpack.optimize.UglifyJsPlugin(),
    new extractTextWebpackPlugin("style.css", {
      allChunks: true
    })
  ]
};

插件庫定義

CommonsChunkPlugin 這個插件就是用于提取公共模塊的插件，它從chunks中的若干個chunk代碼塊中分析出他們公用的模塊，并打包成name定義的chunk代碼塊，你會發(fā)現(xiàn)common代碼塊和入口的common代碼塊重名，我們可以重新寫一個新的名字。也可以不寫。假如重名，生成的common.js中包好的模塊是entry入口定義的所有模塊。[‘vue’, ‘jquery’, ‘underscore’, ‘backbone’]，這樣也比較好理解，因為我們。
htmlWebpackplugin 插件不是webpack自帶的插件，它的作用是根據(jù)chunk代碼塊生成文檔，下面的意思就是在index.html中引入index.js代碼和common.js代碼。
webpack.ProvidePlugin 插件用于有些庫，比如bootstrap，打包不會出錯，但是放在瀏覽器下就出問題，原因是bootstrap在初始化的時候要傳入全局的jQuery變量，jquery也是，jQuery無法賦值到window上，導致報錯，這時候，這個插件就派上用場了，將jquery模塊輸出到全局的jQuery變量上。bootstrap不再報錯
extractTextWebpackPlugin 這個外部插件可以將css文件剝離出來，保存為一個單獨的樣式文件。

插件可以更具開發(fā)環(huán)境定義，因為插件越多，編譯越慢，我們在開發(fā)環(huán)境的時候其實不需要那么多插件，生產(chǎn)環(huán)境的時候才需要，所以可以做一些處理，動態(tài)添加插件。這里有文章可以做,不介紹。

4. 寫邏輯代碼

// index.js

var Vue = require('vue');

var app = new Vue({
  el: '#app',
  components: {
    app: require('./src/app.js')
  }
});

require('vue')，使用vue模塊，新建vue實例，（vue的具體用法上官網(wǎng)），內(nèi)建一個app字組件，用同步的方法獲取在./src/目錄下的app.js模塊。

// index.html 入口模板

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

html-webpack-plugin會自動生成的script，制成入口。

// app.js

var template = require('./app.html');
require('./app.less');

module.exports = {
  template: template,
  data: function (){
    return {
      message: 'hello word!!'
    };
  }
};

// app.html 視圖模板

<div id="div1">
  <img src="./static/logo.png" alt="">
  <div id="div2">
    {{message}}
  </div>
</div>

// app.less 視圖樣式

#div1 {
  text-align: center;
}

#div2 {
  font-size: 30px;
}

定義一個視圖，作為首頁，引入模板，引入樣式，一個SPA的架子就這么搭好了。

5. 編譯

在工程目錄下命令行輸入

webpack

生成目錄

├── dist
│  ├── common.6b92c6b075a69a71d22f.js
│  ├── index.6b92c6b075a69a71d22f.js
│  ├── index.html
│  └── style.6b92c6b075a69a71d22f.css

編譯完成，可以看到以上的目錄，common為公共提取的模塊，style是公共提取的css文件，index.js，邏輯入口。項目打包完成。

6. 調(diào)試開發(fā)

webpack 提供了 weppack-dev-server 插件，很方便我們進行調(diào)試，我們在package.json的script中定義一個命令：

'dev': 'webpack-dev-server --hot --inline'

我們就可以在命令行中輸入 npm run dev，在瀏覽器輸入localhost：8080就可以看到網(wǎng)頁了。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

webpack
Vue

el-table實現(xiàn)搜索高亮展示并滾動到元素位置的操作代碼
這篇文章主要介紹了el-table實現(xiàn)搜索高亮展示并滾動到元素位置,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2024-01-01
Vue.js實現(xiàn)輸入框綁定的實例代碼
這篇文章主要介紹了Vue.js實現(xiàn)輸入框綁定的實例代碼,需要的朋友可以參考下
2017-08-08
Vue3.0中如何監(jiān)聽props方法
這篇文章主要介紹了Vue3.0中如何監(jiān)聽props方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vuex中State的使用方法
這篇文章主要介紹了Vuex中State的使用方法,Vuex 使用單一狀態(tài)樹,用一個對象就包含了全部的應用層級狀態(tài),這也意味著,每個應用將僅僅包含一個 store 實例,需要的朋友可以參考下
2023-11-11
vue3 setup語法糖下的定時器的使用與銷毀
如果在組件中需要使用定時器,注意在銷毀組件的時候,要對定時器進行銷毀,否則時間長了會導致頁面卡頓,這篇文章給大家介紹vue3 setup語法糖下的定時器的使用與銷毀的知識,感興趣的朋友一起看看吧
2024-02-02
前端報錯npm ERR! cb() never called!問題解決辦法
最近接手了一個前臺項目,執(zhí)行npm install的時候一直報錯,所以這里就給大家總結下,這篇文章主要給給大家介紹了關于前端報錯npm?ERR! cb() never called!問題的解決辦法,需要的朋友可以參考下
2024-05-05
Vuex 使用及簡單實例(計數(shù)器)
這篇文章主要介紹了Vuex 使用及簡單實例(計數(shù)器)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
Vue計算屬性computed與方法methods的區(qū)別及說明
這篇文章主要介紹了Vue計算屬性computed與方法methods的區(qū)別及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-08-08
Vue2中Element?UI表單的使用詳解
這篇文章主要為大家詳細介紹了Vue2中Element?UI表單的使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-03-03
在vue3中使用icon圖標的三種方案
這篇文章主要介紹了三種使用icon的方案，分別是element-icon、svg-icon、@iconify/vue，三種方案通過代碼示例介紹的非常詳細,需要的朋友可以參考下
2023-07-07