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