webpack4入門最簡單的例子介紹-創新互聯

webpack在目前來說應該是前端用的比較多的打包工具了，那么對于之前沒有接觸過這塊的該怎么辦呢？答案很明顯嘛，看資料，查文檔，自己去琢磨，自己去敲一敲，跑一跑；

創新互聯建站是一家專業提供復興企業網站建設,專注與成都網站建設、做網站、HTML5建站、小程序制作等業務。10年已為復興眾多企業、政府機構等服務。創新互聯專業網站設計公司優惠進行中。

Webpack是當下最熱門的前端資源模塊化管理和打包工具，它可以將很多松散的模塊按照依賴和規則打包成符合生產環境部署的前端資源，還可以將按需加載的模塊進行代碼分割，等到實際需要的時候再異步加載。

webpack和Grunt以及Gulp相比有什么特性

Gulp/Grunt是一種能夠優化前端的開發流程的工具，而WebPack是一種模塊化的解決方案，不過Webpack的優點使得Webpack可以替代Gulp/Grunt類的工具。

Grunt和Gulp的工作方式是：在一個配置文件中，指明對某些文件進行類似編譯、組合、壓縮等任務的具體步驟。

webpack的工作方式是：把你的項目當做一個整體，通過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的所有依賴文件，使用loaders處理它們，最后打包為一個瀏覽器可識別的JavaScript文件。

那么，這邊我將以一個最基礎的例子來將這個流程跑一邊，包括過程中會遇到哪些問題，怎么解決的，也會一一奉上；

第一步：

我們需要安裝npm，這個只要你有NodeJS運行環境的肯定會有的；這邊這個塊也就不作敘述

第二步：

我們接下來會選擇在項目目錄中進行所有的安裝和操作，不去選擇全局安裝；

在電腦任意盤中新建一個項目文件夾，如：webpackdemo

　　　　　 webpack4 入門最簡單的例子介紹

接下來我們通過cmd進入到這個項目文件夾下，并輸入執行npm init，回車，進行初始化：

接下來，對于package name之類的配置項，我們完全選擇直接回車，到底！

到這一步，就OK了！

此時我們的項目文件夾里就多了一個文件：package.json

第三步：

既然要使用webpack進行打包，那么我們就要來安裝webpack了，起初我們就說過都在項目文件夾里完成，不做全局安裝；那么接下來輸入npm install --save-dev webpack，回車進行安裝：

此時我們的項目文件夾，已經又多了一個文件夾和一個json文件：

第四步：

我們現在可以開始寫自己的項目了，那么我這邊也就按通常各位大牛分享的例子來寫，首先，在項目文件夾下，新建兩個文件加app和public；

app文件夾中寫入test.js和main.js；public文件夾中寫入index.html；

借鑒一下別人的例子：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Webpack demo</title>
</head>
<body>
 <div id='root'></div><br><br> 
<!--引入打包之后的文件-->
<script src="bundle.js"></script> 
</body>
</html>

文章標題：webpack4入門最簡單的例子介紹-創新互聯
瀏覽路徑：http://m.kartarina.com/article36/ccgpsg.html

成都網站建設公司_創新互聯，為您提供網站改版、App開發、自適應網站、移動網站建設、面包屑導航、網站收錄

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容