webpack入門文檔教程

時間 2019-12-01

標籤 webpack 入門文檔教程简体版

原文原文鏈接

webpack 入門教程

歡迎

這個簡單的教程會通個一個簡單的例子來做爲指南。javascript

從中，你能夠學到：css

怎麼安裝 webpack
怎麼使用 webpack
怎麼使用加載器
怎麼使用開發服務器

安裝 webpack

首先確保安裝了 node.jshtml

$ npm install webpack -g

上面命令確保能夠在命令行中使用 webpack 命令java

設定編譯

從一個空白文件開始，建立如下文件：node

增長 entry.jsreact

document.write("It works.");

增長 index.htmlwebpack

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

而後執行如下命令：git

$ webpack ./entry.js bundle.js

這將編譯 entry.js 並輸出爲 bundle.js。github

若是一切正常，將輸入相似下面的信息：web

Hash: e97678c23acf8ee01956
Version: webpack 1.9.10
Time: 135ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.44 kB       0  [emitted]  main
   [0] ./entry.js 29 bytes {0} [built]

在瀏覽器中打開 index.html，將展現 It works.。

It works.

第二個文件

下一步，咱們將把部分代碼移到另外一個文件中。

增長 content.js

module.exports = "It works from content.js.";

更新 entry.js

- document.write("It works.");
+ document.write(require("./content.js"));

而後編譯

$ webpack ./entry.js bundle.js

刷新瀏覽器，能夠看到內容變爲 It works from content.js.。

It works from content.js.

webpack 會分析入口文件（entry.js）來找尋依賴文件。這些文件（又稱之爲模塊）會包括到 bundle.js 中。webpack 會給每一個模塊一個惟一的 id，而後在 bundle.js 中經過該 id 來訪問對應的模塊。啓動時，只會執行入口模塊。一個短小的運行時提供了 require 函數，在引用模塊時會執行依賴模塊。

首個加載器

咱們但願在應用中增長一個 css 文件。

由於 webpack 自己只能支持 js，因此須要 css-loader 來處理 css 文件，同時還須要一個 style-loader 來在頁面中使用 css 文件裏定義的樣式。

建立一個空白的 node_modules 目錄。

執行 npm install css-loader style-loader 來安裝加載器。（由於須要安裝在當前應用，因此不須要 -g 參數）

而後具體使用

增長 style.css

body {
    background: yellow;
}

更新 entry.js

+ require("!style!css!./style.css");
document.write(require("./content.js"));

經過在模塊請求前添加加載器，模塊將會被加載器管道處理。這些加載器特定的方式來處理文件內容，最終轉換後的內容將是一個 javascript 模塊。

注：串聯起來的加載器將自右向左執行。

綁定加載器

咱們並不但願寫相似這樣的代碼 require("!style!css!./style.css");。咱們能夠給指定的文件後綴綁定加載器，這樣只須要寫 require("./style.css")。

更新 entry.js

- require("!style!css!./style.css");
+ require("./style.css");
  document.write(require("./content.js"));

而後運行下面的命令來編譯

$ webpack ./entry.js bundle.js --module-bind 'css=style!css'

刷新頁面，將看到一樣的效果。

It works from content.js.

配置文件

把配置選項移到配置文件中

增長 webpack.config.js

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

而後只需執行 webpack 來編譯

Hash: 88d0f4710a9d3a391d69
Version: webpack 1.9.10
Time: 263ms
    Asset     Size  Chunks             Chunk Names
bundle.js  10.7 kB       0  [emitted]  main
   [0] ./entry.js 76 bytes {0} [built]
   [5] ./content.js 44 bytes {0} [built]
    + 4 hidden modules

webpack 命令會嘗試加載當前目錄下的 webpack.config.js 文件。

更友好的輸出

若是項目變得愈來愈大，編譯耗時將會愈來愈長。因此，咱們但願可以展現一些進度條，同時增長顏色……

這些需求能夠經過如下命令來實現

$ webpack --progress --colors

監控模式

咱們並不但願每個變動都須要去手動編譯，則能夠經過如下命令來改善。

$ webpack --progress --colors --watch

這樣，webpack 會緩存未變動的模塊而輸出變動的模塊。

開啓 webpack 監控模式後，webpack 會給全部文件添加用於編譯的文件監控。若是有任何變動，將會觸發編譯。當緩存開啓時，webpack 會在內存中保存全部模塊內容並在沒變動時直接重用。

開發服務器

開發服務器是一個更好的選擇

$ npm install webpack-dev-server -g

而後

$ webpack-dev-server --progress --colors

這會在 localhost:8080 提供一個小的 express 服務器來提供靜態資源以及自動編譯的套件。當有套件從新編譯後，會經過 socket.io 來自動更新瀏覽器頁面。在瀏覽器中打開 http://localhost:8080/webpack-dev-server/bundle 。

webpack-dev-server 使用了 webpack 監控模式，同時也阻止了 webpack 生成結果文件到硬盤，而是直接經過內存來提供服務。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。