webpack初探

geekzhou 發(fā)布于2019-08-01 14:58 / 2067人閱讀

摘要：我們還想要的顏色我們通過(guò)下面命令行可以做到觀察模式我們不想每一次項(xiàng)目變化都要手動(dòng)編譯可以緩存兩次編譯之間沒(méi)有變化的模塊和輸出文件。開(kāi)發(fā)服務(wù)器使用開(kāi)發(fā)服務(wù)器開(kāi)發(fā)體驗(yàn)會(huì)更好這將在本地啟動(dòng)一個(gè)端口的服務(wù)，指向靜態(tài)文件以及自動(dòng)編譯。

原文英文版來(lái)自webpack官網(wǎng)
demo代碼
本文地址

歡迎瀏覽

這是一篇通過(guò)一個(gè)小例子給你介紹webpack的文章
你可以通過(guò)這篇文章了解到：

如何安裝webpack

如何使用webpack

如何使用裝載器(loaders)

如何使用開(kāi)發(fā)服務(wù)器(development server)

安裝webpack

你需要先安裝node.js。
$ npm install webpack -g

上面這句命令成功后，webpack命令行就可以使用了。

(如果你運(yùn)行這句命令出錯(cuò)，可以試試$ cnpm install webpack -g。cnpm需要安裝)

設(shè)置，編譯

創(chuàng)建一個(gè)空文件夾。
在文件夾里先創(chuàng)建兩個(gè)文件entry.js，index.html

entry.js

document.write("webpack正常運(yùn)行");

index.html

然后運(yùn)行下面這句命令：
$ webpack ./entry.js bundle.js
這句命令行將會(huì)編譯你的js文件entry.js，并且會(huì)創(chuàng)建一個(gè)新的js文件bundle.js。
如果編譯成功，將會(huì)出現(xiàn)如下提示：

用瀏覽器打開(kāi)index.html，你能看到webpack正常運(yùn)行

兩個(gè)js文件

下一步，我們?cè)谛碌膉s文件里添加一些代碼。

content.js

module.exports = "content.js.正常工作";

修改entry.js

// document.write("webpack正常運(yùn)行");
 document.write(require("./content.js"));

再用下面的命令行編譯一下
$ webpack ./entry.js bundle.js

刷新你的瀏覽器，你可以看到文字content.js.正常工作

webpack將會(huì)分析你的入口文件(entry.js)與其他js文件的依賴關(guān)系。這些js文件（也可以成為模塊）也會(huì)被打包進(jìn)bundle.js文件。webpack將會(huì)給每一個(gè)模塊一個(gè)唯一的ID，保存到bundle.js文件，通過(guò)唯一ID可以訪問(wèn)到。只要入口模塊會(huì)在執(zhí)行時(shí)被調(diào)用。（入口模塊再提到用其它他所依賴的模塊）。執(zhí)行時(shí)，只提供必需的方法模塊，必要時(shí)才執(zhí)行依賴，調(diào)用依賴模塊。  （恕我語(yǔ)言表達(dá)能力有點(diǎn)爛，有疑惑的朋友請(qǐng)移步看我另一篇文章webpack把你的項(xiàng)目編譯成了什么）

第一個(gè)加載器(loader)

我們想在應(yīng)用里加一個(gè)css文件。
webpack只能處理Javascript，所以我們需要css加載器(css-loader)去加載css文件。我們還需要樣式加載器(style-loader)把css文件應(yīng)用到style標(biāo)簽內(nèi)。
運(yùn)行npm install css-loader style-loader命令安裝這些加載器(loader)。(不需要安裝到全局，所以不要-g參數(shù))。這個(gè)命令將會(huì)幫你創(chuàng)建一個(gè)node_modules文件夾，加載器都在這個(gè)文件夾里。

同樣也可以使用cnpm install css-loader style-loader。cnpm需要安裝)

繼續(xù)：

創(chuàng)建一個(gè)style.css文件

body {
    background: yellow;
}

*修改 entry.js文件

   //document.write("webpack正常運(yùn)行");
  require("!style!css!./style.css");
  document.write(require("./content.js"));

重新編譯，然后刷新瀏覽器，可以看到頁(yè)面的背景色為黃色。

通過(guò)前置加載器去請(qǐng)求模塊，管道機(jī)制處理模塊。這些加載器在特定的方式中改變文件內(nèi)容。這文件被處理后，最后變成一個(gè)JavaScript模塊。

綁定加載器

我們不想去寫(xiě)很長(zhǎng)的加載代碼require("!style!css!./style.css");。
我們可以把文件的后綴名綁定到加載器上，然后我們只需要寫(xiě)：require("./style.css")。

修改entry.js文件

 //document.write("webpack正常運(yùn)行");
 //require("!style!css!./style.css");
require("./style.css");
 document.write(require("./content.js"));

運(yùn)行下面的命令進(jìn)行編譯：
webpack ./entry.js bundle.js --module-bind "css=style!css"
瀏覽器你能看到同樣的結(jié)果

配置文件

我們可以把命令行里的參數(shù)移到配置文件里：

添加webpack.config.js文件

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /.css$/, loader: "style!css" }
        ]
    }
};

現(xiàn)在我們只需要運(yùn)行：

webpack

去編譯

漂亮的輸出

隨著該項(xiàng)目的增長(zhǎng)，編譯可能需要更長(zhǎng)的時(shí)間。所以我們要展示一些進(jìn)度條。我們還想要的顏色…我們通過(guò)下面命令行可以做到：

webpack --progress --colors

觀察模式

我們不想每一次項(xiàng)目變化都要手動(dòng)編譯……

webpack --progress --colors --watch

webpack可以緩存兩次編譯之間沒(méi)有變化的模塊和輸出文件。

當(dāng)我們使用觀察模式進(jìn)行編譯的時(shí)候。如果檢測(cè)到任何更改，webpack將再次運(yùn)行編譯。如果檢測(cè)到某個(gè)文件沒(méi)有改變就啟用高速緩存，直接使那個(gè)模塊webpack緩存。

開(kāi)發(fā)服務(wù)器

使用開(kāi)發(fā)服務(wù)器開(kāi)發(fā)體驗(yàn)會(huì)更好

npm install webpack-dev-server -g

webpack-dev-server --progress --colors

這將在本地啟動(dòng)一個(gè)8080端口的服務(wù)，指向靜態(tài)文件index.html以及bundle.js(bundle自動(dòng)編譯)。每當(dāng)bundle.js重新自動(dòng)編譯，會(huì)自動(dòng)刷新瀏覽器（通過(guò)websocket機(jī)制）。打開(kāi)瀏覽器 http://localhost:8080/webpack-dev-server/bundle

謝謝