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

Ashin 發布于2019-08-20 14:34 / 468人閱讀

摘要：本身也是運行在環境中的模塊，它通常會返回一個函數。這個命名規則和搜索優先級順序在的中定義。那就等下一篇介紹吧，一篇文章有太多內容，會讓人很乏的從入門到放棄四從入門到放棄二從入門到放棄三源代碼

此篇文章僅僅是整理自己接觸webpack的入門過程，可能有很多不正確的地方，希望大家諒解，并指出錯誤幫助改進。

對于webpack的介紹和前期對他的入門使用，我覺得官方（中文網）已經介紹的很簡單了，但是為了文章的可讀性，還是按照自己的方式從頭到尾的碼一遍。

What is webpack?

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

First step

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

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

安裝成功后，之后安裝依賴包都可以用 cnpm 代替 npm 執行，例如：

$npm install

//等于

$ cnpm install

接下來全局安裝 webpack，來練練手

$ cnpm install webpack -g

此時 webpack 已經安裝到了全局環境下，可以通過命令行webpack -h試試。

通常我們會將 webpack 安裝到項目的依賴中，這樣就可以使用項目本地版本的 webpack。項目目錄中我們要先生成package.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

    
        
    
    
        
         
         //bundle.js 是webpack編譯時生成的文件
    


#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源代碼

云服務器 GPU云服務器 spark從入門到前端從入門到精通云計算從入門到精通 html從入門到精通

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81743.html

Vue.js 服務端渲染業務入門實踐

摘要：說起，其實早在出現之前，網頁就是在服務端渲染的。沒有涉及流式渲染組件緩存對的服務端渲染有更深一步的認識，實際在生產環境中的應用可能還需要考慮很多因素。選擇的服務端渲染方案，是情理之中的選擇，不是對新技術的盲目追捧，而是一切為了需要。作者：威威（滬江前端開發工程師）本文原創，轉載請注明作者及出處。背景最近，產品同學一如往常笑嘻嘻的遞來需求文檔，縱使內心萬般拒絕，身體倒是很誠實...

miya 2019-08-21 16:18 評論0 收藏0
Vuex從入門到放棄（webpack自動導入模塊命名空間輔助函數）

摘要：從入門到放棄自動導入模塊命名空間輔助函數什么是什么是狀態管理，驅動應用的數據源，以聲明方式將映射到視圖，響應在上的用戶輸入導致的狀態變化。最后重點來了外包在職萌新求內推位置廣州 Vuex從入門到放棄（webpack自動導入模塊命名空間輔助函數） 1.什么是vuex 1.1 什么是狀態管理 state，驅動應用的數據源； view，以聲明方式將 state 映射到視圖； actio...

blankyao 2019-08-26 18:36 評論0 收藏0
vue-cli “從入門到放棄”

摘要：主要作用目錄結構本地調試代碼部署熱加載單元測試在如今前端技術飛速發展的時代，和作為前端框架已經呈現出了三國鼎立的局面。主要作用：目錄結構、本地調試、代碼部署、熱加載、單元測試在如今前端技術飛速發展的時代，angular.js、vue.js 和 react.js 作為前端框架已經呈現出了三國鼎立的局面。作為國人若你不知道 vue，小生表示可以理解，如果作為中國的前端猿不知道 vue，...

DrizzleX 2019-08-01 17:19 評論0 收藏0
vue-cli “從入門到放棄”

摘要：主要作用目錄結構本地調試代碼部署熱加載單元測試在如今前端技術飛速發展的時代，和作為前端框架已經呈現出了三國鼎立的局面。主要作用：目錄結構、本地調試、代碼部署、熱加載、單元測試在如今前端技術飛速發展的時代，angular.js、vue.js 和 react.js 作為前端框架已經呈現出了三國鼎立的局面。作為國人若你不知道 vue，小生表示可以理解，如果作為中國的前端猿不知道 vue，...

william 2019-08-20 18:28 評論0 收藏0
vue-cli “從入門到放棄”

摘要：主要作用目錄結構本地調試代碼部署熱加載單元測試在如今前端技術飛速發展的時代，和作為前端框架已經呈現出了三國鼎立的局面。主要作用：目錄結構、本地調試、代碼部署、熱加載、單元測試在如今前端技術飛速發展的時代，angular.js、vue.js 和 react.js 作為前端框架已經呈現出了三國鼎立的局面。作為國人若你不知道 vue，小生表示可以理解，如果作為中國的前端猿不知道 vue，...

Joyven 2019-08-29 13:05 評論0 收藏0