加深对 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 部分的详细内容，更多请关注编程之家其它相关文章！