国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

webpack再看一遍

whinc / 1380人閱讀

摘要：在終端中使用可以自動創(chuàng)建這個文件輸入這個命令后，終端會問你一系列問題。百度后發(fā)現(xiàn)引入了模式，有三個狀態(tài)，開發(fā)模式生產(chǎn)模式無。

什么是webpack，為什么要使用webapck

*

導(dǎo)語

之前一直忙著項目，沒時間整理自己的東西，最近剛好發(fā)現(xiàn)自己對webpack又如此陌生了，于是整理了一篇關(guān)于webpack初探的干貨，這里是一點簡單的webpack配置

為什么使用webpck

現(xiàn)今很多網(wǎng)頁其實都是可以看做功能豐富的應(yīng)用，它們擁有著復(fù)雜的
javaScript代碼和一大堆依賴包。為了簡化開發(fā)的復(fù)雜度，前端社區(qū)涌現(xiàn)出很多很好的實踐方法

模塊化，讓我們可以把復(fù)雜的文件細小化為小的文件

類似于TypeScript這種在JavaScript基礎(chǔ)上拓展的開發(fā)語言，使我們能夠?qū)崿F(xiàn)目前的版本javaScript不能直接使用的特性，并且之后還能轉(zhuǎn)換為javaScript文件使瀏覽器識別

Scss less等CSS預(yù)處理器

這些改進確實大大的提高了我們的開發(fā)效率，但在利用他們開發(fā)的文件往往需要額外處理才能讓瀏覽器識別，而手動處理又是非常繁瑣的，這就為webpack類的工具出現(xiàn)提供了需求

什么是webpack

Webpack可以看做是模塊打包機，它做的事情是，分析你的項目結(jié)構(gòu)，找到Javascript模塊以及其他的一些瀏覽器不能直接直接運行的拓展語言，并將其打包成合適的格式以供瀏覽器使用

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

其實Webpack和另外兩個并沒有太多的可比性，Gulp/Grunt是一種能夠優(yōu)化前端開發(fā)流程的 工具，而webpack是一種模塊化的解決方案，不過webpack的優(yōu)點是使得Webpack可以替代Gulp/Grunt工具
Grunt和Gulp的工作方式是：在一個配置文件中，指明對某些文件進行類似編譯，組合，壓縮等任務(wù)的步驟，這個工具之后可以幫你完成
Webpack的工作方式是：把你的項目當(dāng)做一個整體，通過一個給定的主文件，Wenpack將從這個文件開始找到你的項目的所有依賴文件，使用loader處理他們，最后打包成一個javascript可以識別的文件

webpack處理速度更快更加直接

開始使用webpack
安裝webpack

webpack可以使用npm安裝（最好使用全局安裝）

//全局安裝
npm install -g webpack
//局部安裝
npm install --save-dev webpack
正式使用webpack前的準(zhǔn)備

在當(dāng)前文件夾中創(chuàng)建一個package.json文件，這是一個標(biāo)準(zhǔn)的npm說明文件，里面蘊含豐富的信息，包括當(dāng)前項目的依賴模塊，自定義腳本任務(wù)等。在終端中使用npm init可以自動創(chuàng)建這個文件

    npm init
    //輸入這個命令后，終端會問你一系列問題。諸如項目名稱，項目描述，作者等信息，不過不用擔(dān)心，如果不準(zhǔn)備在npm中發(fā)布你的模塊，這些問題的答案不重要，默認(rèn)即可

package.json文件以及就緒，我們在本項目中安裝webpack作為依賴包，

在根目錄下創(chuàng)建兩個空文件夾，一個是用來存放我們編寫的文件，另外一個是存放webpack打包后的數(shù)據(jù)，項目目錄結(jié)構(gòu)如下所示：

正確使用webpack

在終端中使用最基礎(chǔ)的命令是：
webpack {entry file/入口文件} {denstionation for bundled file/出口文件}
高版本webpack上面命令不適用，為
webpack {entry file/入口文件} {denstionation for bundled file/出口文件}

webpack data/main.js -o webpack-data/main.bundle.js

只需要指定一個入口，webpack將會自動識別項目所依賴的文件，當(dāng)webpack沒有進行全局安裝時，需要進入到webpack的打包文件夾下進行打包

node_nodules/.bin

結(jié)果如下：

dist下的文件為項目直接運行文件，如果項目要放到服務(wù)器上可以直接把dist文件放上去

到現(xiàn)在為止webpack已經(jīng)成功打包好了一個文件了，但是我們會感覺還是很麻煩，請看下文

通過一個配置文件來使用webpack

標(biāo)題的意思很簡單，就是我們能不能使用npm的命令就可以執(zhí)行我們想要的打包呢。不止如此，而且我們想要webpack更高級的功能（loaders和plugins）也通過一個命令就搞定，既然如此我們?yōu)槭裁床欢x一個配置文件呢，我們只要把我們想要做的都放在這里面，然后我們執(zhí)行命令的時候它自動幫我們搞定了

具體做法：

在根目錄下新建一個名為webpack.config.js文件，把我們想做的按照規(guī)范都放進去，一個簡單的配置如下：

//_dirname是nodejs的一個全局變量指向當(dāng)前執(zhí)行腳本所在目錄
modules.exports = {
    //webpack的唯一入口文件
    entry: _dirname + "/data/main.js",
    //打包文件存放的位置以及文件名
    output: {
        path:_dirname+"/webpack-data",
        filename: "main.bundle.js"
    }
}

建好了這個文件，我們要打包文件只需要在終端里面運行webpack就可以了，但是我們不會僅滿足于此
于是我們就用npm來引導(dǎo)任務(wù)執(zhí)行，對其進行配置后只需要簡單的npm start命令來進行打包。在package.json中對npm腳本部分進行相關(guān)設(shè)置，方法如下：

{
    "scripts": {
        "start":"webpack" //相當(dāng)于把npm的start命令指向webpack命令
    }
}

注意：package.json的腳本部分已經(jīng)默認(rèn)添加了打包啟動路徑，因此在這里無論是全局或者局部都不需要寫詳細路徑

總結(jié)


這是我終端會輸出的信息。很多時候我們只要達到目的了，可能也不會再去管其他的了（雖然我也是這樣），但是我較勁了一下，就去查了下輸出的信息的意思；

version time
webpack版本 打包花費的時間
Asset Size Chunks chunk Names
打包生成的文件 打包花的所花時間 打包的分塊 打包的名稱

還有一個黃色的警告，很明顯，也會讓我們不是很爽，那讓我們再堅持下，贏得最后的勝利
上面我們可以看到，我的webpack版本是4.27.1.那這個問題就迎刃而解了，百度下，webpack4出現(xiàn)這個警告。百度后發(fā)現(xiàn)webpack4引入了模式，有三個狀態(tài)，開發(fā)模式-生產(chǎn)模式-無。我們沒有設(shè)置模式，這樣的話我們就可以去我們的那個packjson里面設(shè)置下。

最后簡單點，開發(fā)模式下代碼沒有壓縮，生產(chǎn)模式下代碼壓縮了。一直覺得“聞道有先后，術(shù)業(yè)有專攻，如是而已”，所以在求知路上一直困知勉行，望大佬們指教。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/100180.html

相關(guān)文章

  • webpack入門學(xué)習(xí)手記（一）

    摘要：爭取早日能完全拋棄掉中文文檔，最終可以翻譯英文文檔，輸出英文文檔。待續(xù)相關(guān)文章入門學(xué)習(xí)手記一入門學(xué)習(xí)手記二入門學(xué)習(xí)手記三入門學(xué)習(xí)手記四 本人微信公眾號：前端修煉之路，歡迎關(guān)注。 showImg(https://segmentfault.com/img/bVbk0kO?w=1150&h=599); 之前用過gulp、grunt，但是一直沒有學(xué)習(xí)過webpack。這兩天剛好有時間，學(xué)習(xí)了下...

    mengera88 評論0 收藏0

  • 如何構(gòu)建一個復(fù)雜的Ember.js項目

    摘要：本系列教材將為讀者介紹怎么樣使用構(gòu)建一個復(fù)雜的項目。本教程分為個小部分，通過這篇文章一步步為你講解怎么使用構(gòu)建一個稍微復(fù)雜的項目。說明本教程是基于而作，請注意與你自己的版本區(qū)別，如果出現(xiàn)不兼容問題請自行升級項目。 文章來源：http://xcoding.tech/tags/Ember-Demo/ 聲明：希望本系列教程能幫助更多學(xué)習(xí)Ember.js的初學(xué)者。 本系列教材將為讀者介紹怎么樣...

    djfml 評論0 收藏0

  • react+webpack+webstorm開發(fā)環(huán)境搭建

    摘要：先是基礎(chǔ)知識，首先是補了的基礎(chǔ)，使用了的入門教程。另外關(guān)于，慕課的視頻教程講的也比較清晰，適合入門統(tǒng)統(tǒng)過了一遍之后，開始建立腳手架，正式上馬編寫。廢話不多說了，下面一步一步開始了。安裝完成之后，記得設(shè)置路徑構(gòu)建項目使用新建一個空白項目。 前言 春節(jié)期間，更新了一下自己關(guān)于前端的知識體系，要知道對于前端技術(shù)，我還是停留在JSP，JQUERY的時代，現(xiàn)在項目里面使用REACT作為前臺，所以...

    Snailclimb 評論0 收藏0

  • 作為一個前端工程師也要掌握的幾種文件路徑知識

    摘要：前言之前在做配置時候多次用到路徑相關(guān)內(nèi)容，最近在寫項目的時候，有一個文件需要上傳到阿里云的功能，同時本地服務(wù)器也需要保留一個文件備份。如果返回的路徑字符串長度為零，那么他會返回一個，代表當(dāng)前的文件夾。 showImg(https://segmentfault.com/img/bVbwElJ?w=480&h=204); 前言 之前在做webpack配置時候多次用到路徑相關(guān)內(nèi)容，最近在寫項...

    wslongchen 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<