資訊專欄INFORMATION COLUMN
摘要：在下一個(gè)章節(jié)，我們會(huì)配合搭建一個(gè)可以用最新語(yǔ)法開(kāi)發(fā)的平臺(tái)項(xiàng)目構(gòu)建二編譯環(huán)境搭建。
注：以下教程均在 windows 環(huán)境實(shí)現(xiàn)，使用其他操作系統(tǒng)的同學(xué)實(shí)踐過(guò)程可能會(huì)有些出入。
一、準(zhǔn)備工作安裝最新的 Node.js 環(huán)境；（官網(wǎng)地址：https://nodejs.org/zh-cn/）
安裝 cnpm 淘寶npm鏡像；（在控制臺(tái)執(zhí)行命令：npm install -g cnpm --registry=https://registry.npm.taobao.org）
二、搭建 webpack 基本文件目錄新建一個(gè)文件夾并命名為 webpackDemo；
命令行切換到 webpackDemo 的文件目錄下，執(zhí)行 npm init -y 生成默認(rèn) package.json 配置文件；（package.json 文件用于描述項(xiàng)目的一些基本信息，以及依賴的配置，具體字段含義不在此處說(shuō)明）
利用 cnpm 安裝 webpack（這里使用 [email protected] 版本）：cnpm i --save-dev webpack@3；
新建 webpack.config.js；（用于配置 webpack 的運(yùn)行方式）
??現(xiàn)在我們 webpackDemo 文件夾內(nèi)的結(jié)構(gòu)應(yīng)該是這樣的：
??現(xiàn)在已經(jīng)搭建好 webpack 的基本目錄了，現(xiàn)在如果在 webpackDemo 的目錄下執(zhí)行命令 webpack，會(huì)提示如下錯(cuò)誤：
??這是因?yàn)樵?webpack 命令執(zhí)行過(guò)程中，會(huì)從當(dāng)前路徑讀取 webpack.config.js 的配置信息，現(xiàn)在我們的 webpack.config.js 文件是空的，沒(méi)有 output.filename 這個(gè)配置項(xiàng)，所以會(huì)提示 "output.filename" 這個(gè)配置項(xiàng)是必須的。
??現(xiàn)在讓我們讓我們配置一個(gè)最簡(jiǎn)單的 webpack.config.js：
webpack.config.js
??根據(jù)配置信息，webpack 會(huì)找到打包入口起點(diǎn) ./index.js，并輸出文件 ./test.js?，F(xiàn)在我們的當(dāng)前目錄下還不存在 index.js，所以先新建一個(gè) index.js 文件：
index.js
??我們的入口文件做的事情很簡(jiǎn)單，僅僅是定義了一個(gè) test 變量。
??現(xiàn)在我們的文件目錄結(jié)構(gòu)是這樣的：
??接下來(lái)讓我們?cè)?webpackDemo 目錄下執(zhí)行 webpack 打包命令，看看會(huì)發(fā)生什么：
??從輸出信息里可以看出來(lái)，webpack 打包耗時(shí) 67ms，在當(dāng)前目錄產(chǎn)生了一個(gè) 2.49kB 的 test.js 文件。再看我們的文件目錄結(jié)構(gòu)，多出了一個(gè) test.js 文件：
??現(xiàn)在讓我們來(lái)看一下經(jīng)過(guò) webpack 打包生成的 test.js 文件。
??可以看到打包出來(lái)的 test.js 文件就是一個(gè)自執(zhí)行的函數(shù)：
(function(modules) {
...
})([
(function(module, exports) {
var test = 123;
})
]);
??我們的 index.js 文件的內(nèi)容，被以函數(shù)數(shù)組的形式傳遞到 modules 參數(shù)中，并在主函數(shù)中被執(zhí)行。（webpack 生成文件的具體說(shuō)明將在后續(xù)章節(jié)會(huì)提到。）
??以上就是最基本的 webpack 項(xiàng)目結(jié)構(gòu)搭建。在下一個(gè)章節(jié)，我們會(huì)配合 babel 搭建一個(gè)可以用最新 ES6 語(yǔ)法開(kāi)發(fā)的平臺(tái)（webpack 項(xiàng)目構(gòu)建：（二）ES6 編譯環(huán)境搭建）。
源碼下載地址：https://github.com/xh4722/web...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93127.html
摘要：本質(zhì)就是一個(gè)編譯器，通過(guò)將源代碼解析成抽象語(yǔ)法樹(shù)將源代碼的結(jié)果一系列轉(zhuǎn)換生成目標(biāo)代碼的將目標(biāo)代碼的轉(zhuǎn)換成代碼。項(xiàng)目構(gòu)建三開(kāi)發(fā)環(huán)境本地服務(wù)器搭建源碼下載地址參考資料入門(mén)阮一峰中文文檔中文網(wǎng) 注：以下教程均在 windows 環(huán)境實(shí)現(xiàn)，使用其他操作系統(tǒng)的同學(xué)實(shí)踐過(guò)程可能會(huì)有些出入。 ??在上一章 webpack 項(xiàng)目構(gòu)建：（一）基本架構(gòu)搭建 我們搭建了一個(gè)最基本的 webpack 項(xiàng)目，現(xiàn)...
摘要：博主目前的這個(gè)項(xiàng)目還不算很大，模塊依賴簡(jiǎn)單，但期望完成諸如版本號(hào)替換，壓縮代碼，合并文件，發(fā)布到服務(wù)器等和模塊化關(guān)系不大的工作，所以使用了。同時(shí)，對(duì)和附加緩存，配合和版本號(hào)實(shí)現(xiàn)服務(wù)器更新，這一部分其實(shí)已經(jīng)幫我們實(shí)現(xiàn)好了。 經(jīng)常在各種論壇、博客還有 github 上活躍的朋友不難發(fā)現(xiàn)，許多大牛都有自己的網(wǎng)站，也多以博客為主。博主作為一個(gè)立志前端的大白，難道不應(yīng)該和大牛學(xué)習(xí)么？說(shuō)干就干，前...
摘要：博主目前的這個(gè)項(xiàng)目還不算很大，模塊依賴簡(jiǎn)單，但期望完成諸如版本號(hào)替換，壓縮代碼，合并文件，發(fā)布到服務(wù)器等和模塊化關(guān)系不大的工作，所以使用了。同時(shí)，對(duì)和附加緩存，配合和版本號(hào)實(shí)現(xiàn)服務(wù)器更新，這一部分其實(shí)已經(jīng)幫我們實(shí)現(xiàn)好了。 經(jīng)常在各種論壇、博客還有 github 上活躍的朋友不難發(fā)現(xiàn)，許多大牛都有自己的網(wǎng)站，也多以博客為主。博主作為一個(gè)立志前端的大白，難道不應(yīng)該和大牛學(xué)習(xí)么？說(shuō)干就干，前...
摘要：可以使用或來(lái)安裝我用來(lái)重新嘗試一次對(duì)速度表示不理想的可以嘗試淘寶的不要過(guò)度依賴中可以寫(xiě)成放哪都行，可以寫(xiě)成可以寫(xiě)成看到這個(gè)畫(huà)面，安裝完成了。 初步搭建腳手架 Tips 任何不錯(cuò)的開(kāi)源項(xiàng)目都有 project-cli 腳手架、我們用它生成往往能快速配制出最佳的、理想的腳手架 我通常使用 cli 生成項(xiàng)目骨架再在之基礎(chǔ)上進(jìn)行個(gè)人修改。 什么是 CLI 命令行界面（英語(yǔ)：command-li...
摘要：可以使用或來(lái)安裝我用來(lái)重新嘗試一次對(duì)速度表示不理想的可以嘗試淘寶的不要過(guò)度依賴中可以寫(xiě)成放哪都行，可以寫(xiě)成可以寫(xiě)成看到這個(gè)畫(huà)面，安裝完成了。 初步搭建腳手架 Tips 任何不錯(cuò)的開(kāi)源項(xiàng)目都有 project-cli 腳手架、我們用它生成往往能快速配制出最佳的、理想的腳手架 我通常使用 cli 生成項(xiàng)目骨架再在之基礎(chǔ)上進(jìn)行個(gè)人修改。 什么是 CLI 命令行界面（英語(yǔ)：command-li...
閱讀 1061·2021-09-22 15:26
閱讀 2637·2021-09-09 11:52
閱讀 1924·2021-09-02 09:52
閱讀 2258·2021-08-12 13:28
閱讀 1197·2019-08-30 15:53
閱讀 524·2019-08-29 13:47
閱讀 3399·2019-08-29 11:00
閱讀 3108·2019-08-29 10:58
