webpack 項目構建：（一）基本架構搭建

voidking 發布于2019-08-22 15:03 / 2203人閱讀

摘要：在下一個章節，我們會配合搭建一個可以用最新語法開發的平臺項目構建二編譯環境搭建。

注：以下教程均在 windows 環境實現，使用其他操作系統的同學實踐過程可能會有些出入。

一、準備工作

安裝最新的 Node.js 環境；（官網地址：https://nodejs.org/zh-cn/）

安裝 cnpm 淘寶npm鏡像；（在控制臺執行命令：npm install -g cnpm --registry=https://registry.npm.taobao.org）

二、搭建 webpack 基本文件目錄

新建一個文件夾并命名為 webpackDemo；

命令行切換到 webpackDemo 的文件目錄下，執行 npm init -y 生成默認 package.json 配置文件；（package.json 文件用于描述項目的一些基本信息，以及依賴的配置，具體字段含義不在此處說明）

利用 cnpm 安裝 webpack（這里使用 webpack@3.11.0 版本）：cnpm i --save-dev webpack@3；

新建 webpack.config.js；（用于配置 webpack 的運行方式）

??現在我們 webpackDemo 文件夾內的結構應該是這樣的：

三、配置 webpack.config.js

??現在已經搭建好 webpack 的基本目錄了，現在如果在 webpackDemo 的目錄下執行命令 webpack，會提示如下錯誤：

??這是因為在 webpack 命令執行過程中，會從當前路徑讀取 webpack.config.js 的配置信息，現在我們的 webpack.config.js 文件是空的，沒有 output.filename 這個配置項，所以會提示 "output.filename" 這個配置項是必須的。
??現在讓我們讓我們配置一個最簡單的 webpack.config.js：

webpack.config.js

??根據配置信息，webpack 會找到打包入口起點 ./index.js，并輸出文件 ./test.js。現在我們的當前目錄下還不存在 index.js，所以先新建一個 index.js 文件：

index.js

??我們的入口文件做的事情很簡單，僅僅是定義了一個 test 變量。

??現在我們的文件目錄結構是這樣的：

??接下來讓我們在 webpackDemo 目錄下執行 webpack 打包命令，看看會發生什么：

??從輸出信息里可以看出來，webpack 打包耗時 67ms，在當前目錄產生了一個 2.49kB 的 test.js 文件。再看我們的文件目錄結構，多出了一個 test.js 文件：

??現在讓我們來看一下經過 webpack 打包生成的 test.js 文件。

??可以看到打包出來的 test.js 文件就是一個自執行的函數：

(function(modules) {
    ...
})([
    (function(module, exports) {
        var test = 123;
    })
]);

??我們的 index.js 文件的內容，被以函數數組的形式傳遞到 modules 參數中，并在主函數中被執行。（webpack 生成文件的具體說明將在后續章節會提到。）

??以上就是最基本的 webpack 項目結構搭建。在下一個章節，我們會配合 babel 搭建一個可以用最新 ES6 語法開發的平臺（webpack 項目構建：（二）ES6 編譯環境搭建）。

源碼下載地址：https://github.com/xh4722/web...

GPU云服務器云服務器構建架構 webpack搭建如何構建java項目構建架構微服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93127.html

webpack 項目構建：（二）ES6 編譯環境搭建

摘要：本質就是一個編譯器，通過將源代碼解析成抽象語法樹將源代碼的結果一系列轉換生成目標代碼的將目標代碼的轉換成代碼。項目構建三開發環境本地服務器搭建源碼下載地址參考資料入門阮一峰中文文檔中文網注：以下教程均在 windows 環境實現，使用其他操作系統的同學實踐過程可能會有些出入。 ??在上一章 webpack 項目構建：（一）基本架構搭建我們搭建了一個最基本的 webpack 項目，現...

marser 2019-08-22 15:08 評論0 收藏0
個人博客主頁搭建隨筆

摘要：博主目前的這個項目還不算很大，模塊依賴簡單，但期望完成諸如版本號替換，壓縮代碼，合并文件，發布到服務器等和模塊化關系不大的工作，所以使用了。同時，對和附加緩存，配合和版本號實現服務器更新，這一部分其實已經幫我們實現好了。經常在各種論壇、博客還有 github 上活躍的朋友不難發現，許多大牛都有自己的網站，也多以博客為主。博主作為一個立志前端的大白，難道不應該和大牛學習么？說干就干，前...

whjin 2019-08-02 16:04 評論0 收藏0
個人博客主頁搭建隨筆

摘要：博主目前的這個項目還不算很大，模塊依賴簡單，但期望完成諸如版本號替換，壓縮代碼，合并文件，發布到服務器等和模塊化關系不大的工作，所以使用了。同時，對和附加緩存，配合和版本號實現服務器更新，這一部分其實已經幫我們實現好了。經常在各種論壇、博客還有 github 上活躍的朋友不難發現，許多大牛都有自己的網站，也多以博客為主。博主作為一個立志前端的大白，難道不應該和大牛學習么？說干就干，前...

cnio 2019-08-23 11:54 評論0 收藏0
《從零構建前后分離的web項目》實戰 -5分鐘快速構建炒雞規范的VUE項目骨架

摘要：可以使用或來安裝我用來重新嘗試一次對速度表示不理想的可以嘗試淘寶的不要過度依賴中可以寫成放哪都行，可以寫成可以寫成看到這個畫面，安裝完成了。初步搭建腳手架 Tips 任何不錯的開源項目都有 project-cli 腳手架、我們用它生成往往能快速配制出最佳的、理想的腳手架我通常使用 cli 生成項目骨架再在之基礎上進行個人修改。什么是 CLI 命令行界面（英語：command-li...

qieangel2013 2019-08-23 11:58 評論0 收藏0
《從零構建前后分離的web項目》實戰 -5分鐘快速構建炒雞規范的VUE項目骨架

摘要：可以使用或來安裝我用來重新嘗試一次對速度表示不理想的可以嘗試淘寶的不要過度依賴中可以寫成放哪都行，可以寫成可以寫成看到這個畫面，安裝完成了。初步搭建腳手架 Tips 任何不錯的開源項目都有 project-cli 腳手架、我們用它生成往往能快速配制出最佳的、理想的腳手架我通常使用 cli 生成項目骨架再在之基礎上進行個人修改。什么是 CLI 命令行界面（英語：command-li...

kel 2019-08-19 11:10 評論0 收藏0