建站
咨詢
售后
建站咨詢
新聞中心
webpack在目前來說應(yīng)該是前端用的比較多的打包工具了，那么對(duì)于之前沒有接觸過這塊的該怎么辦呢？答案很明顯嘛，看資料，查文檔，自己去琢磨，自己去敲一敲，跑一跑；
創(chuàng)新互聯(lián)建站是一家專業(yè)提供復(fù)興企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、做網(wǎng)站、HTML5建站、小程序制作等業(yè)務(wù)。10年已為復(fù)興眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計(jì)公司優(yōu)惠進(jìn)行中。Webpack是當(dāng)下最熱門的前端資源模塊化管理和打包工具，它可以將很多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源，還可以將按需加載的模塊進(jìn)行代碼分割，等到實(shí)際需要的時(shí)候再異步加載。
webpack和Grunt以及Gulp相比有什么特性
Gulp/Grunt是一種能夠優(yōu)化前端的開發(fā)流程的工具，而WebPack是一種模塊化的解決方案，不過Webpack的優(yōu)點(diǎn)使得Webpack可以替代Gulp/Grunt類的工具。
Grunt和Gulp的工作方式是：在一個(gè)配置文件中，指明對(duì)某些文件進(jìn)行類似編譯、組合、壓縮等任務(wù)的具體步驟。
webpack的工作方式是：把你的項(xiàng)目當(dāng)做一個(gè)整體，通過一個(gè)給定的主文件（如：index.js），Webpack將從這個(gè)文件開始找到你的項(xiàng)目的所有依賴文件，使用loaders處理它們，最后打包為一個(gè)瀏覽器可識(shí)別的JavaScript文件。
那么，這邊我將以一個(gè)最基礎(chǔ)的例子來將這個(gè)流程跑一邊，包括過程中會(huì)遇到哪些問題，怎么解決的，也會(huì)一一奉上；
第一步：
我們需要安裝npm，這個(gè)只要你有NodeJS運(yùn)行環(huán)境的肯定會(huì)有的；這邊這個(gè)塊也就不作敘述
第二步：
我們接下來會(huì)選擇在項(xiàng)目目錄中進(jìn)行所有的安裝和操作，不去選擇全局安裝；
在電腦任意盤中新建一個(gè)項(xiàng)目文件夾，如：webpackdemo
接下來我們通過cmd進(jìn)入到這個(gè)項(xiàng)目文件夾下，并輸入執(zhí)行npm init，回車，進(jìn)行初始化：
接下來，對(duì)于package name之類的配置項(xiàng)，我們完全選擇直接回車，到底！
到這一步，就OK了！
此時(shí)我們的項(xiàng)目文件夾里就多了一個(gè)文件：package.json
第三步：
既然要使用webpack進(jìn)行打包，那么我們就要來安裝webpack了，起初我們就說過都在項(xiàng)目文件夾里完成，不做全局安裝；那么接下來輸入npm install --save-dev webpack，回車進(jìn)行安裝：
此時(shí)我們的項(xiàng)目文件夾，已經(jīng)又多了一個(gè)文件夾和一個(gè)json文件：
第四步：
我們現(xiàn)在可以開始寫自己的項(xiàng)目了，那么我這邊也就按通常各位大牛分享的例子來寫，首先，在項(xiàng)目文件夾下，新建兩個(gè)文件加app和public；
app文件夾中寫入test.js和main.js；public文件夾中寫入index.html；
借鑒一下別人的例子：
index.html
Webpack demo
本文標(biāo)題：webpack4入門最簡(jiǎn)單的例子介紹-創(chuàng)新互聯(lián)
鏈接分享：http://www.dlmjj.cn/article/ccgpsg.html
