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

*

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

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

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

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

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

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

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

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

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

webpack處理速度更快更加直接

安裝webpack

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

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

正式使用webpack前的準(zhǔn)備

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

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

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

在根目錄下創(chuàng)建兩個(gè)空文件夾，一個(gè)是用來存放我們編寫的文件，另外一個(gè)是存放webpack打包后的數(shù)據(jù)，項(xiàng)目目錄結(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

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

node_nodules/.bin

結(jié)果如下：

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

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

通過一個(gè)配置文件來使用webpack

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

具體做法：

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

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

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

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

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

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

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

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