webpack再看一遍

什麼是webpack，爲何要使用webapck

*

導語

以前一直忙着項目，沒時間整理本身的東西，最近恰好發現本身對webpack又如此陌生了，因而整理了一篇關於webpack初探的乾貨，這裏是一點簡單的webpack配置

爲何使用webpck

現今不少網頁其實都是能夠看作功能豐富的應用，它們擁有着複雜的
javaScript代碼和一大堆依賴包。爲了簡化開發的複雜度，前端社區涌現出不少很好的實踐方法

• 模塊化，讓咱們能夠把複雜的文件細小化爲小的文件
• 相似於TypeScript這種在JavaScript基礎上拓展的開發語言，使咱們可以實現目前的版本javaScript不能直接使用的特性，而且以後還能轉換爲javaScript文件使瀏覽器識別
• Scss less等CSS預處理器

這些改進確實大大的提升了咱們的開發效率，但在利用他們開發的文件每每須要額外處理才能讓瀏覽器識別，而手動處理又是很是繁瑣的，這就爲webpack類的工具出現提供了需求

什麼是webpack

Webpack能夠看作是模塊打包機，它作的事情是，分析你的項目結構，找到Javascript模塊以及其餘的一些瀏覽器不能直接直接運行的拓展語言，並將其打包成合適的格式以供瀏覽器使用

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

其實Webpack和另外兩個並無太多的可比性，Gulp/Grunt是一種可以優化前端開發流程的 工具，而webpack是一種模塊化的解決方案，不過webpack的優勢是使得Webpack能夠替代Gulp/Grunt工具
Grunt和Gulp的工做方式是：在一個配置文件中，指明對某些文件進行相似編譯，組合，壓縮等任務的步驟，這個工具以後能夠幫你完成
Webpack的工做方式是：把你的項目當作一個總體，經過一個給定的主文件，Wenpack將從這個文件開始找到你的項目的全部依賴文件，使用loader處理他們，最後打包成一個javascript能夠識別的文件

webpack處理速度更快更加直接

開始使用webpack

安裝webpack

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

//全局安裝
npm install -g webpack
//局部安裝
npm install --save-dev webpack

正式使用webpack前的準備

1. 在當前文件夾中建立一個package.json文件，這是一個標準的npm說明文件，裏面蘊含豐富的信息，包括當前項目的依賴模塊，自定義腳本任務等。在終端中使用npm init能夠自動建立這個文件

npm init
    //輸入這個命令後，終端會問你一系列問題。諸如項目名稱，項目描述，做者等信息，不過不用擔憂，若是不許備在npm中發佈你的模塊，這些問題的答案不重要，默認便可

1. package.json文件以及就緒，咱們在本項目中安裝webpack做爲依賴包，

在根目錄下建立兩個空文件夾，一個是用來存放咱們編寫的文件，另一個是存放webpack打包後的數據，項目目錄結構以下所示：

• 正確使用webpack

在終端中使用最基礎的命令是：
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將會自動識別項目所依賴的文件，當webpack沒有進行全局安裝時，須要進入到webpack的打包文件夾下進行打包

node_nodules/.bin

結果以下：

dist下的文件爲項目直接運行文件，若是項目要放到服務器上能夠直接把dist文件放上去

到如今爲止webpack已經成功打包好了一個文件了，可是咱們會感受仍是很麻煩，請看下文

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

標題的意思很簡單，就是咱們能不能使用npm的命令就能夠執行咱們想要的打包呢。不止如此，並且咱們想要webpack更高級的功能（loaders和plugins）也經過一個命令就搞定，既然如此咱們爲何不定義一個配置文件呢，咱們只要把咱們想要作的都放在這裏面，而後咱們執行命令的時候它自動幫咱們搞定了

具體作法：

• 在根目錄下新建一個名爲webpack.config.js文件，把咱們想作的按照規範都放進去，一個簡單的配置以下：

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

建好了這個文件，咱們要打包文件只須要在終端裏面運行webpack就能夠了，可是咱們不會僅知足於此
因而咱們就用npm來引導任務執行，對其進行配置後只須要簡單的npm start命令來進行打包。在package.json中對npm腳本部分進行相關設置，方法以下：

{
    "scripts": {
        "start":"webpack" //至關於把npm的start命令指向webpack命令
    }
}

注意：package.json的腳本部分已經默認添加了打包啓動路徑，所以在這裏不管是全局或者局部都不須要寫詳細路徑

總結

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

version	time
webpack版本	打包花費的時間

Asset	Size	Chunks	chunk Names
打包生成的文件	打包花的所花時間	打包的分塊	打包的名稱

還有一個黃色的警告，很明顯，也會讓咱們不是很爽，那讓咱們再堅持下，贏得最後的勝利
上面咱們能夠看到，個人webpack版本是4.27.1.那這個問題就迎刃而解了，百度下，webpack4出現這個警告。百度後發現webpack4引入了模式，有三個狀態，開發模式-生產模式-無。咱們沒有設置模式，這樣的話咱們就能夠去咱們的那個packjson裏面設置下。

最後簡單點，開發模式下代碼沒有壓縮，生產模式下代碼壓縮了。一直以爲「聞道有前後，術業有專攻，如是而已」，因此在求知路上一直困知勉行，望大佬們指教。