加深對 Webpack 的理解：第 2 部分

在先前的教學課程中，我們學習如何設定 Webpack 專案以及如何使用載入器來處理 JavaScript。不過，Webpack 真正的亮點在於它能夠捆綁其他類型的靜態資源（例如 CSS 和圖像），並僅在需要時將它們包含在我們的專案中。讓我們先為頁面添加一些樣式。

樣式載入器

首先，在 styles 目錄中建立一個普通的 CSS 檔案。呼叫 main.css 並為標題元素新增樣式規則。

h2 {
    background: blue;
    color: yellow;
}

那麼我們要如何將此樣式表放入我們的頁面中呢？好吧，就像 Webpack 的大多數事情一樣，我們需要另一個載入器。事實上有兩個：css-loader 和 style-loader。第一個從我們的 CSS 文件中讀取所有樣式，而另一個將所述樣式註入到我們的 HTML 頁面中。像這樣安裝它們：

npm install style-loader css-loader

接下來，我們告訴 Webpack 如何使用它們。在 webpack.config.js 中，我們需要在 loaders 陣列中新增另一個物件。在其中，我們要新增一個測試以僅符合 CSS 檔案並指定要使用的載入器。

{
    test: /\.css$/,
    exclude: /node_modules/,
    loader: 'style!css'
}

此程式碼片段中有趣的部分是 'style!css' 行。載入器是從右向左讀取的，因此這告訴 Webpack 首先讀取以 .css 結尾的任何檔案的樣式，然後將這些樣式註入到我們的頁面中。

因為我們已經更新了設定文件，所以我們需要重新啟動開發伺服器才能使更改生效。使用 ctrl c 停止伺服器並使用 webpack-dev-server 重新啟動伺服器。

我們現在需要做的就是從 main.js 檔案中取得樣式表。我們這樣做的方式與任何其他 JavaScript 模組相同：

const sayHello = require('./say-hello');

require('./styles/main.css');

sayHello('Guybrush', document.querySelector('h2'));

注意我們甚至沒有觸及index.html。開啟瀏覽器即可看到樣式為 h2 的頁面。更改樣式表中標題的顏色即可立即更新，無需刷新。可愛。

你必須大罵它

「但現在沒有人使用 CSS，爺爺！這一切都是關於 Sass 的」。當然如此。幸運的是，Webpack 有一個載入器可以完成這件事。使用以下命令將其與 Sass 的節點版本一起安裝：

npm install sass-loader node-sass

然後更新webpack.config.js：

{
    test: /\.scss$/,
    exclude: /node_modules/,
    loader: 'style!css!sass'
}

現在的意思是，對於任何以 .scss 結尾的文件，將 Sass 轉換為純 CSS，從 CSS 中讀取樣式，然後將樣式插入到頁面中。請記得將 main.css 重新命名為 main.scss，並需要新命名的檔案。首先是一些 Sass：

$background: blue;

h2 {
    background: $background;
    color: yellow;
}

然後是main.js：

require('./styles/main.scss');

超級。就這麼簡單。無需轉換和保存文件，甚至無需查看資料夾。我們只需要直接輸入 Sass 樣式。

圖片

「那我敢打賭，圖片、裝載機也是如此？」當然！對於圖像，我們要使用 url-loader。此載入程式會取得影像的相對 URL 並更新路徑，以便將其正確包含在您的檔案包中。像往常一樣：

npm install url-loader

現在，讓我們在 webpack.config.js 中嘗試一些不同的東西。以通常的方式為 loaders 數組添加另一個條目，但這次我們希望正規表示式能夠匹配具有不同檔案副檔名的圖像：

{
    test: /\.(jpg|png|gif)$/,
    include: /images/,
    loader: 'url'
}

請注意此處的另一個差異。我們沒有使用 exclude 鍵。相反，我們使用 include。這更有效，因為它告訴 webpack 忽略與名為「images」的資料夾不匹配的所有內容。

通常您會使用某種模板系統來建立 HTML 視圖，但我們將保持其基本性並以老式方式在 JavaScript 中建立圖像標記。首先建立一個image元素，將所需的圖片設定到src屬性中，然後將該元素加入到頁面中。

var imgElement = document.createElement('img');

imgElement.src = require('./images/my-image.jpg');

document.body.appendChild(imgElement);

返回瀏覽器，您的圖像就出現在您的眼前！

預載器

開發過程中經常執行的另一個任務是 linting。 Linting 是一種尋找程式碼中潛在錯誤以及檢查您是否遵循某些編碼約定的方法。您可能想要查找的內容是「我是否在沒有先聲明的情況下使用了變數？」或者「我忘記了行尾的分號嗎？」透過執行這些規則，我們可以儘早清除愚蠢的錯誤。

JSHint 是一种流行的 linting 工具。这会检查我们的代码并突出显示我们所犯的潜在错误。 JSHint 可以在命令行手动运行，但这很快就会成为开发过程中的一件苦差事。理想情况下，我们希望它在每次保存文件时自动运行。我们的 Webpack 服务器已经在留意变化，所以是的，你猜对了——另一个加载器。

按照通常的方式安装jshint-loader：

 npm install jshint-loader

我们必须再次将其添加到我们的 webpack.config.js 中来告诉 Webpack 使用它。然而，这个加载器略有不同。它实际上并没有转换任何代码——只是看看。我们也不希望所有较重的代码修改加载器仅仅因为忘记了分号而运行并失败。这就是预加载器的用武之地。预加载器是我们指定在主要任务之前运行的任何加载器。它们以与加载器类似的方式添加到我们的 webpack.conf.js 中。

module: {
    preLoaders: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'jshint'
        }
    ],
    loaders: [
       ...    
    ]
}

现在，如果检测到问题，我们的 linting 过程会立即运行并失败。在重新启动 Web 服务器之前，我们需要告诉 JSHint 我们正在使用 ES6，否则当它看到我们正在使用的 const 关键字时将会失败。

在配置中的模块键之后，添加另一个名为“jshint”的条目和一行来指定 JavaScript 的版本。

module: {
    preLoaders: [
        ...
    ],
    loaders: [
        ...    
    ]
},
jshint: {
    esversion: 6
}

保存文件并重新启动webpack-dev-server。运行还好吗？伟大的。这意味着您的代码不包含错误。让我们通过删除这一行中的分号来介绍一个：

var imgElement = document.createElement('img')

再次保存文件并查看终端。现在我们得到了这个：

WARNING in ./main.js
jshint results in errors
  Missing semicolon. @ line 7 char 47

谢谢，JSHint！

准备生产

现在我们很高兴我们的代码已经成型并且它完成了我们想要的一切，我们需要为现实世界做好准备。上线代码时最常见的事情之一就是缩小代码，将所有文件连接成一个，然后将其压缩到尽可能小的文件中。在继续之前，请查看您当前的 bundle.js。它可读，有大量空白，大小为 32kb。

“等等！别告诉我。另一个装载机，对吧？”没有！在这种罕见的情况下，我们不需要装载机。 Webpack 内置了缩小功能。一旦您对代码感到满意，只需运行以下命令：

webpack -p

-p 标志告诉 Webpack 让我们的代码为生产做好准备。当它生成捆绑包时，它会尽可能地进行优化。运行此命令后，打开 bundle.js，您会看到它全部被压缩在一起，即使使用如此少量的代码，我们也节省了 10kb。

摘要

我希望这个由两部分组成的教程能让您有足够的信心在自己的项目中使用 Webpack。请记住，如果您想在构建过程中执行某些操作，那么 Webpack 很可能有一个加载器。所有加载器都是通过 npm 安装的，因此请查看那里是否有人已经制作了您需要的内容。

玩得开心！

以上是加深對 Webpack 的理解：第 2 部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！