一、前端模塊化、組件化開(kāi)發(fā)初步了解

1.1、什么前端模塊化開(kāi)發(fā)

其實(shí)很多語(yǔ)言天生就支持模塊化：

Java —— import 包

C# ——using 命名空間

可以說(shuō)：“模塊化”是 “傳統(tǒng)前端”與“現(xiàn)代前端”最重要標(biāo)志。

所謂前端模塊化，就是把一個(gè)相對(duì)獨(dú)立的功能，單獨(dú)形成一個(gè)文件（更多時(shí)候封裝為 js 文件），可輸入指定依賴、輸出指定的函數(shù)，供外界調(diào)用，其它都在內(nèi)部隱藏實(shí)現(xiàn)細(xì)節(jié)。這樣即可方便不同的項(xiàng)目重復(fù)使用，也不會(huì)對(duì)項(xiàng)目造成額外的影響?！猨s 腳本的模塊化組織。

模塊的職責(zé)：封裝實(shí)現(xiàn)、暴露接口、聲明依賴

前端模塊化開(kāi)發(fā)主要的優(yōu)勢(shì)：

（1）便于代碼的復(fù)用、提高可維護(hù)性

（2）有很多第三方模塊/插件，可以直接導(dǎo)入使用

（3）異步加載 js 模塊，避免瀏覽器假

1.2、前端模塊化與組件化區(qū)別

與前面講的封裝組件（組件化）有什么區(qū)別呢？

組件化更側(cè)重的是對(duì) UI 的封裝，模塊化側(cè)重的是對(duì)實(shí)現(xiàn)功能的代碼和數(shù)據(jù)的封裝。在組件中一般可去調(diào)用模塊（js 模塊）。

二、webpack 的基本認(rèn)識(shí)

作用：

webpack的作用其實(shí)就是將原生的js文件（原生的js文件瀏覽器不能識(shí)別，如下面的main.js和test.js）打包成瀏覽器可以識(shí)別的js文件。像我們平時(shí)引入到html的js文件全部都是經(jīng)過(guò)webpack打包過(guò)后的文件，瀏覽器可以直接識(shí)別。

總結(jié)：

先安裝node,然后再進(jìn)行本地安裝webpack和webpackcli,安裝完成后在package.json中的生產(chǎn)依賴可以看到安裝的版本。

main.js是入口文件，所以其他的js文件都要引入到main.js當(dāng)中去，然后main.js再引入到html文件中去。

test.js中使用export定義了一個(gè)對(duì)外的接口,如上所述，所有的js文件都要引入到main.js中去，所以在main.js中使用import接受test.js模塊的接口，然后使用webpack命令打包

webpack ./src/main.js -o ./dist/bundle.js

前面的路徑是要打包的文件，-o是out輸出的意思，后面的路徑是你要打包到的路徑和文件，文件名（bundle.js）可以自取。

這個(gè)命令太長(zhǎng)，可以在webpack.config.js文件中配置上面的webpack后面的一系列的代碼，entry是要打包的文件，output是你要打包到的路徑和文件名。

還有一定要在package.json文件中的script中定義打包命令映射，否則打包命令無(wú)法生效。一般的是運(yùn)行命令是npm run xxx,但是如果映射命令是start就比較特殊，直接npm start就可以了。

然后再html文件中引入打包之后的文件（bundle.js)然后運(yùn)行就可以再控制臺(tái)看到test.js文件的輸出了。

2.1、webpack 是什么

本質(zhì)上，webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模

塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時(shí)，它會(huì)遞歸地構(gòu)建一個(gè)依賴關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè) bundle。

解釋：

現(xiàn)代前端開(kāi)發(fā)一般都會(huì)基于模塊化開(kāi)發(fā)，也就是說(shuō)我們會(huì)把功能相關(guān)的 js 代碼封裝在一個(gè) js 文件里面，就形成一個(gè)個(gè) js 模塊，然而這些 js 文件瀏覽器不能直接識(shí)別，也就是解釋不了，webpack 就能把這些 js 文件打包成一個(gè)瀏覽器能夠識(shí)別運(yùn)行的文件，所有的相關(guān)依賴模塊都會(huì)打包到一個(gè)文件里面。

2.2、webpack 的作用

（1）Webpack 核心主要對(duì) js 文件進(jìn)行打包，打包成瀏覽器能夠識(shí)別運(yùn)行的文件。打包其他的靜態(tài)資源都需要再安裝相應(yīng)插件/加載器。如下面（2）（3）（4）。

（2）如果要對(duì) png、jpg、css 等文件打包，需要再安裝相關(guān)插件。打包成一個(gè)個(gè)靜態(tài)文件，這樣還可以減少頁(yè)面的請(qǐng)求。

（3）可集成 babel 工具實(shí)現(xiàn) EcmaScript 6（有些瀏覽器不支持 ES6，比如 IE678） 規(guī)范代碼轉(zhuǎn)換成更低版本的（比如 ES5）, 用來(lái)兼容絕大多數(shù)瀏覽器。ES6 相對(duì)于 ES5 有些非常優(yōu)異的語(yǔ)法，后面講解。

（4）可集成模塊熱加載，當(dāng)文件代碼改變后自動(dòng)刷新瀏覽器更新頁(yè)面。需要再安裝相應(yīng)的插件。

三、webpack 安裝

在開(kāi)始安裝之前，請(qǐng)確保安裝了 Node.js 。建議使用 Node.js 最新的長(zhǎng)期支持版本(LTS - Long Term Support)。

3.1、webpack 全局安裝(不建議)

安裝在 node.js 的全局環(huán)境下，查看全局安裝位置：

npm root –g

（1）安裝 webpack

<!-- 安裝最新版本 @4.42.1 -->

cnpm install --global webpack

<!-- 安裝特定版本 -->

cnpm install --global webpack@<version

（2）安裝 webpack-cli

如 果 安 裝 的 是 webpack v4.0 以 后 版 本 , 還 需 要 安 裝

webpack-cli（以前版本集成了） , 才能使用 webpack 的命令，否則 cmd 窗口 webpack 命令沒(méi)有作用。

cnpm install --global webpack-cli

（3）查看安裝的 webpack 版本

webpack –v

官方不建議這種安裝，建議本地安裝。因?yàn)?，如果全局安裝的話，打包的時(shí)候不會(huì)把 webpack、webpack-cli 打包進(jìn)去（webpack 在全局安裝目錄下），那么當(dāng)這個(gè)項(xiàng)目要移植到其他電腦上的時(shí)候，自然就要用其他電腦全局安裝的 webpack，而如果其他電腦上全局安裝的 webpack 與你項(xiàng)目當(dāng)初開(kāi)發(fā)時(shí)候使用的版本不一致，那么就 可能導(dǎo)致項(xiàng)目構(gòu)建不成功。而本地安裝就是把 webpack、webpack-cli安裝到所在項(xiàng)目的目錄下，這樣移植到任何電腦上都是使用本項(xiàng)目的webpack，自然不會(huì)有問(wèn)題。

另外采用全局安裝的話，如果全局安裝的 webpack 是 4.0 版本，那么所有用到的 webpack 項(xiàng)目就都要使用 webpack4.0 版本，顯得不靈活（當(dāng)然另外再本地安裝也可以）。

所以一般每個(gè)項(xiàng)目單獨(dú)安裝 webpack，也就是本地安裝

3.2、webpack 本地安裝(建議安裝)

為了測(cè)試本地安裝，先把全局安裝的 webpack 和webpack-cli 卸載掉。分別執(zhí)行以下 2 條命令卸載。

npm uninstall -g webpack

npm uninstall -g webpack-cli

進(jìn)入項(xiàng)目根文件夾（webpack-demo1），輸入以下命令：

#初始化項(xiàng)目 -y 是采用默認(rèn)配置

cnpm init -y

安裝 v4.42.0 ，不要少了 v ，開(kāi)發(fā)依賴安裝，發(fā)布之后不需要:

cnpm i -D webpack@v4.42.0 【當(dāng)前最新版本】

# 安裝 CLI ，開(kāi)發(fā)依賴安裝，發(fā)布之后不需要:

cnpm i -D webpack-cli@3.3.11 【當(dāng)前最新版本】

安裝好后，查看下項(xiàng)目下的 package.json 文件，會(huì)發(fā)現(xiàn)多了下面代碼：表示項(xiàng)目對(duì) webpack 和 webpack-cli 產(chǎn)生了依賴，版本分別是 4 以上和 3 以上的

“devDependencies”: {

“webpack”: “^4.42.0”,

“webpack-cli”: “^3.3.11”}

注意：本地安裝好了后，直接 webpack –v 是不行的，不能直接使用的。需要在項(xiàng)目下的 package.json 文件中的“scripts”節(jié)進(jìn)行命令映射。

如上在 package.json 文件中命令映射好了后，在命令窗口中需要輸入:
npm run showVersion
showVersion 就是映射的別名，但是表示執(zhí)行的是后面的
webpack-v 命令。