webpack -> vue Component 從入門到放棄（一）

時間 2019-12-04

標籤 webpack vue component 入門放棄简体版

原文原文鏈接

此篇文章僅僅是整理本身接觸webpack的入門過程，可能有不少不正確的地方，但願你們諒解，並指出錯誤幫助改進。html

對於webpack的介紹和前期對他的入門使用，我以爲官方（中文網）已經介紹的很簡單了，可是爲了文章的可讀性，仍是按照本身的方式從頭至尾的碼一遍。vue

What is webpack?node

Webpack 是一個模塊打包器。它將根據模塊的依賴關係進行靜態分析，而後將這些模塊按照指定的規則生成對應的靜態資源。(附上不明覺厲的解析圖)webpack

First stepgit

先來安裝個node.js(node官網下載)，打個預防針，我後面用npm(node包管理器)安裝依賴包的時候，常常安裝不成功，因爲資源文件的不穩定，因此我建議裝個淘寶鏡像。github

$ npm install cnpm -g --registry=https://registry.npm.taobao.org
$ cnpm -v //安裝後查看一下版本信息，以確認是否安裝成功

安裝成功後，以後安裝依賴包均可以用 cnpm 代替 npm 執行，例如：web

$npm install

//等於

$ cnpm install

接下來全局安裝 webpack，來練練手正則表達式

$ cnpm install webpack -g

此時 webpack 已經安裝到了全局環境下，能夠經過命令行webpack -h試試。npm

一般咱們會將 webpack 安裝到項目的依賴中，這樣就可使用項目本地版本的 webpack。項目目錄中咱們要先生成package.json文件，json

# 確保已經進入項目目錄

$ cnpm init

#固然也能夠手動建立一個package.json，而後填入信息

{
"name": "webpack01",

"version": "1.0.0",

"description": "test webpack",

"main": "index.js",

"dependencies": {},

"devDependencies": {},

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"author": "BJ",

"license": "ISC"

}
# 安裝 webpack 依賴

cnpm install webpack --save-dev

# 成功後package.json文件會發生點變化

"devDependencies": {

"webpack": "^2.2.1"

}

Second Step

咱們來建立幾個文件，測試一下webpack的基礎功能（此demo與官網貼出基本一致）

#index.html
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="app"></div>
         <script src="bundle.js"></script>
         //bundle.js 是webpack編譯時生成的文件
    </body>
</html>

#entry.js
document.getElementById('app').innerHTML="it works";

能夠開始用webpack打包了

$ webpack entry.js bundle.js

在瀏覽器中打開 index.html 就能夠看到效果了。

咱們再加一個文件

#content.js
var p= document.createElement("p")
p.innerHTML="this another file";
document.body.appendChild(p);

#更改一下entry.js
document.getElementById('app').innerHTML="it works";
require("./content.js");

而後再次運行 webpack

$ webpack entry.js bundle.js

webpack 會再次顯示日誌

Webpack 會分析入口文件，解析包含依賴關係的各個文件。這些文件（模塊）都打包到 bundle.js 。Webpack 會給每一個模塊分配一個惟一的 id 並經過這個 id 索引和訪問模塊。在頁面啓動時，會先執行 entry.js 中的代碼，其它模塊會在運行 require 的時候再執行。

這篇文章所涉及到的demo文件目錄：

bundle.js

content.js

entry.js

index.html

package.json

node-modules

是否是不過癮，太簡單了？！
接下里咱們加入webpack 的loader（很重要的一個東東）
先來看看 loader 的介紹：

Webpack 自己只能處理 JavaScript 模塊，若是要處理其餘類型的文件，就須要使用 loader 進行轉換。

Loader 能夠理解爲是模塊和資源的轉換器，它自己是一個函數，接受源文件做爲參數，返回轉換的結果。這樣，咱們就能夠經過 require 來加載任何類型的模塊或文件，好比 CoffeeScript、 JSX、 LESS 或圖片。

先來看看 loader 有哪些特性？

Loader 能夠經過管道方式鏈式調用，每一個 loader 能夠把資源轉換成任意格式並傳遞給下一個 loader ，可是最後一個 loader 必須返回 JavaScript。
Loader 能夠同步或異步執行。
Loader 運行在 node.js 環境中，因此能夠作任何可能的事情。
Loader 能夠接受參數，以此來傳遞配置項給 loader。
Loader 能夠經過文件擴展名（或正則表達式）綁定給不一樣類型的文件。
Loader 能夠經過 npm 發佈和安裝。
除了經過 package.json 的 main 指定，一般的模塊也能夠導出一個 loader 來使用。
Loader 能夠訪問配置。
插件可讓 loader 擁有更多特性。
Loader 能夠分發出附加的任意文件。
Loader 自己也是運行在 node.js 環境中的 JavaScript 模塊，它一般會返回一個函數。大多數狀況下，咱們經過 npm 來管理 loader，可是你也能夠在項目中本身寫 loader 模塊。

按照慣例，而非必須，loader 通常以 xxx-loader 的方式命名，xxx 表明了這個 loader 要作的轉換功能，好比 json-loader。

在引用 loader 的時候可使用全名 json-loader，或者使用短名 json。這個命名規則和搜索優先級順序在 webpack 的 resolveLoader.moduleTemplates api 中定義。

Default: ["*-webpack-loader", "*-web-loader", "*-loader", "*"]
#Loader 能夠在 require() 引用模塊的時候添加，也能夠在 webpack 全局配置中進行綁定，還能夠經過命令行的方式使用。

看那麼多，其實還不如來操做一下。。。那就等下一篇介紹吧，一篇文章有太多內容，會讓人很乏的~~~

webpack -> vue Component 從入門到放棄（四）
webpack -> vue Component 從入門到放棄（二）
webpack -> vue Component 從入門到放棄（三）
github源代碼

相關標籤/搜索

每日一句

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