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