資訊專欄INFORMATION COLUMN
摘要：本身也是運(yùn)行在環(huán)境中的模塊，它通常會(huì)返回一個(gè)函數(shù)。這個(gè)命名規(guī)則和搜索優(yōu)先級(jí)順序在的中定義。那就等下一篇介紹吧，一篇文章有太多內(nèi)容，會(huì)讓人很乏的從入門到放棄四從入門到放棄二從入門到放棄三源代碼
此篇文章僅僅是整理自己接觸webpack的入門過(guò)程，可能有很多不正確的地方，希望大家諒解，并指出錯(cuò)誤幫助改進(jìn)。
對(duì)于webpack的介紹和前期對(duì)他的入門使用，我覺(jué)得官方（中文網(wǎng)）已經(jīng)介紹的很簡(jiǎn)單了，但是為了文章的可讀性，還是按照自己的方式從頭到尾的碼一遍。
What is webpack?
Webpack 是一個(gè)模塊打包器。它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對(duì)應(yīng)的靜態(tài)資源。(附上不明覺(jué)厲的解析圖)
First step
先來(lái)安裝個(gè)node.js(node官網(wǎng)下載)，打個(gè)預(yù)防針，我后面用npm(node包管理器)安裝依賴包的時(shí)候，經(jīng)常安裝不成功，由于資源文件的不穩(wěn)定，所以我建議裝個(gè)淘寶鏡像。
$ npm install cnpm -g --registry=https://registry.npm.taobao.org $ cnpm -v //安裝后查看一下版本信息，以確認(rèn)是否安裝成功
安裝成功后，之后安裝依賴包都可以用 cnpm 代替 npm 執(zhí)行，例如：
$npm install //等于 $ cnpm install
接下來(lái)全局安裝 webpack，來(lái)練練手
$ cnpm install webpack -g
此時(shí) webpack 已經(jīng)安裝到了全局環(huán)境下，可以通過(guò)命令行webpack -h試試。
通常我們會(huì)將 webpack 安裝到項(xiàng)目的依賴中，這樣就可以使用項(xiàng)目本地版本的 webpack。項(xiàng)目目錄中我們要先生成package.json文件，
# 確保已經(jīng)進(jìn)入項(xiàng)目目錄
$ cnpm init
#當(dāng)然也可以手動(dòng)創(chuàng)建一個(gè)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文件會(huì)發(fā)生點(diǎn)變化
"devDependencies": {
"webpack": "^2.2.1"
}
Second Step
我們來(lái)創(chuàng)建幾個(gè)文件，測(cè)試一下webpack的基礎(chǔ)功能（此demo與官網(wǎng)貼出基本一致）
#index.html
//bundle.js 是webpack編譯時(shí)生成的文件
#entry.js
document.getElementById("app").innerHTML="it works";
可以開始用webpack打包了
$ webpack entry.js bundle.js
在瀏覽器中打開 index.html 就可以看到效果了。
我們?cè)偌右粋€(gè)文件
#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");
然后再次運(yùn)行 webpack
$ webpack entry.js bundle.js
webpack 會(huì)再次顯示日志
Webpack 會(huì)分析入口文件，解析包含依賴關(guān)系的各個(gè)文件。這些文件（模塊）都打包到 bundle.js 。Webpack 會(huì)給每個(gè)模塊分配一個(gè)唯一的 id 并通過(guò)這個(gè) id 索引和訪問(wèn)模塊。在頁(yè)面啟動(dòng)時(shí)，會(huì)先執(zhí)行 entry.js 中的代碼，其它模塊會(huì)在運(yùn)行 require 的時(shí)候再執(zhí)行。
這篇文章所涉及到的demo文件目錄：
bundle.js
content.js
entry.js
index.html
package.json
node-modules
是不是不過(guò)癮，太簡(jiǎn)單了？！
接下里我們加入webpack 的loader（很重要的一個(gè)東東）
先來(lái)看看 loader 的介紹：
Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類型的文件，就需要使用 loader 進(jìn)行轉(zhuǎn)換。
Loader 可以理解為是模塊和資源的轉(zhuǎn)換器，它本身是一個(gè)函數(shù)，接受源文件作為參數(shù)，返回轉(zhuǎn)換的結(jié)果。這樣，我們就可以通過(guò) require 來(lái)加載任何類型的模塊或文件，比如 CoffeeScript、 JSX、 LESS 或圖片。
先來(lái)看看 loader 有哪些特性？
Loader 可以通過(guò)管道方式鏈?zhǔn)秸{(diào)用，每個(gè) loader 可以把資源轉(zhuǎn)換成任意格式并傳遞給下一個(gè) loader ，但是最后一個(gè) loader 必須返回 JavaScript。
Loader 可以同步或異步執(zhí)行。
Loader 運(yùn)行在 node.js 環(huán)境中，所以可以做任何可能的事情。
Loader 可以接受參數(shù)，以此來(lái)傳遞配置項(xiàng)給 loader。
Loader 可以通過(guò)文件擴(kuò)展名（或正則表達(dá)式）綁定給不同類型的文件。
Loader 可以通過(guò) npm 發(fā)布和安裝。
除了通過(guò) package.json 的 main 指定，通常的模塊也可以導(dǎo)出一個(gè) loader 來(lái)使用。
Loader 可以訪問(wèn)配置。
插件可以讓 loader 擁有更多特性。
Loader 可以分發(fā)出附加的任意文件。
Loader 本身也是運(yùn)行在 node.js 環(huán)境中的 JavaScript 模塊，它通常會(huì)返回一個(gè)函數(shù)。大多數(shù)情況下，我們通過(guò) npm 來(lái)管理 loader，但是你也可以在項(xiàng)目中自己寫 loader 模塊。
按照慣例，而非必須，loader 一般以 xxx-loader 的方式命名，xxx 代表了這個(gè) loader 要做的轉(zhuǎn)換功能，比如 json-loader。
在引用 loader 的時(shí)候可以使用全名 json-loader，或者使用短名 json。這個(gè)命名規(guī)則和搜索優(yōu)先級(jí)順序在 webpack 的 resolveLoader.moduleTemplates api 中定義。
Default: ["*-webpack-loader", "*-web-loader", "*-loader", "*"] #Loader 可以在 require() 引用模塊的時(shí)候添加，也可以在 webpack 全局配置中進(jìn)行綁定，還可以通過(guò)命令行的方式使用。
看那么多，其實(shí)還不如來(lái)操作一下。。。那就等下一篇介紹吧，一篇文章有太多內(nèi)容，會(huì)讓人很乏的~~~
webpack -> vue Component 從入門到放棄（四）
webpack -> vue Component 從入門到放棄（二）
webpack -> vue Component 從入門到放棄（三）
github源代碼
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/81743.html
摘要：說(shuō)起，其實(shí)早在出現(xiàn)之前，網(wǎng)頁(yè)就是在服務(wù)端渲染的。沒(méi)有涉及流式渲染組件緩存對(duì)的服務(wù)端渲染有更深一步的認(rèn)識(shí)，實(shí)際在生產(chǎn)環(huán)境中的應(yīng)用可能還需要考慮很多因素。選擇的服務(wù)端渲染方案，是情理之中的選擇，不是對(duì)新技術(shù)的盲目追捧，而是一切為了需要。 作者：威威（滬江前端開發(fā)工程師）本文原創(chuàng)，轉(zhuǎn)載請(qǐng)注明作者及出處。 背景 最近， 產(chǎn)品同學(xué)一如往常笑嘻嘻的遞來(lái)需求文檔， 縱使內(nèi)心萬(wàn)般拒絕， 身體倒是很誠(chéng)實(shí)...
摘要：從入門到放棄自動(dòng)導(dǎo)入模塊命名空間輔助函數(shù)什么是什么是狀態(tài)管理，驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源，以聲明方式將映射到視圖，響應(yīng)在上的用戶輸入導(dǎo)致的狀態(tài)變化。最后重點(diǎn)來(lái)了外包在職萌新求內(nèi)推位置廣州 Vuex從入門到放棄（webpack自動(dòng)導(dǎo)入模塊 命名空間 輔助函數(shù)） 1.什么是vuex 1.1 什么是狀態(tài)管理 state，驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源； view，以聲明方式將 state 映射到視圖； actio...
摘要：主要作用目錄結(jié)構(gòu)本地調(diào)試代碼部署熱加載單元測(cè)試在如今前端技術(shù)飛速發(fā)展的時(shí)代，和作為前端框架已經(jīng)呈現(xiàn)出了三國(guó)鼎立的局面。 主要作用：目錄結(jié)構(gòu)、本地調(diào)試、代碼部署、熱加載、單元測(cè)試 在如今前端技術(shù)飛速發(fā)展的時(shí)代，angular.js、vue.js 和 react.js 作為前端框架已經(jīng)呈現(xiàn)出了三國(guó)鼎立的局面。作為國(guó)人若你不知道 vue，小生表示可以理解，如果作為中國(guó)的前端猿不知道 vue，...
摘要：主要作用目錄結(jié)構(gòu)本地調(diào)試代碼部署熱加載單元測(cè)試在如今前端技術(shù)飛速發(fā)展的時(shí)代，和作為前端框架已經(jīng)呈現(xiàn)出了三國(guó)鼎立的局面。 主要作用：目錄結(jié)構(gòu)、本地調(diào)試、代碼部署、熱加載、單元測(cè)試 在如今前端技術(shù)飛速發(fā)展的時(shí)代，angular.js、vue.js 和 react.js 作為前端框架已經(jīng)呈現(xiàn)出了三國(guó)鼎立的局面。作為國(guó)人若你不知道 vue，小生表示可以理解，如果作為中國(guó)的前端猿不知道 vue，...
摘要：主要作用目錄結(jié)構(gòu)本地調(diào)試代碼部署熱加載單元測(cè)試在如今前端技術(shù)飛速發(fā)展的時(shí)代，和作為前端框架已經(jīng)呈現(xiàn)出了三國(guó)鼎立的局面。 主要作用：目錄結(jié)構(gòu)、本地調(diào)試、代碼部署、熱加載、單元測(cè)試 在如今前端技術(shù)飛速發(fā)展的時(shí)代，angular.js、vue.js 和 react.js 作為前端框架已經(jīng)呈現(xiàn)出了三國(guó)鼎立的局面。作為國(guó)人若你不知道 vue，小生表示可以理解，如果作為中國(guó)的前端猿不知道 vue，...
閱讀 3261·2021-11-23 09:51
閱讀 762·2021-10-14 09:43
閱讀 3290·2021-09-06 15:00
閱讀 2479·2019-08-30 15:54
閱讀 2621·2019-08-30 13:58
閱讀 1953·2019-08-29 13:18
閱讀 1438·2019-08-27 10:58
閱讀 583·2019-08-27 10:53
