Webpack简介：第2部分

在上一个教程中，咱们学习了如何设置webpack项目以及如何使用加载器来处理咱们的javascript。然而， webpack真正闪耀的地方在于它能够捆绑其他类型的静态资源，例如 css 和图像，并且仅在需要时才将它们包含在咱们的项目中。让咱们从向咱们的页面添加一些样式开始。

样式加载器

首先，在样式目录中创建一个普通的 CSS 文件。调用main.css并为标题元素添加样式规则。

h2 {
    background: blue;
    color: yellow;
}

那么咱们如何把这个样式表放到咱们的页面中呢？好吧，就像大多数使用webp ack 的东西一样，咱们需要另一个加载器。实际上有两个：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 中创建一个图像标签。首先创建一个图像元素，将需要的图像设置为 src 属性，然后将该元素添加到页面中。

var imgElement = document.createElement('img');
 
imgElement.src = require('./images/my-image.jpg');
 
document.body.appendChild(imgElement);

回到您的浏览器，看到您的图像出现在您的眼前！

预加载器

在开发过程中通常执行的另一项任务是 linting。Linting 是一种在代码中查找潜在错误并检查您是否遵循某些编码约定的方法。您可能要查找的内容是“我是否在未先声明的情况下使用了变量？” 或“我是否忘记了一行末尾的分号？” 通过执行这些规则，咱们可以尽早清除愚蠢的错误。

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

以通常的方式安装jshint-loader：

npm install jshint-loader

同样，咱们必须通过将它添加到咱们的webpack.config.js. 但是，这个加载器略有不同。它实际上并没有转换任何代码——它只是看一下。咱们也不希望咱们所有较重的代码修改加载器仅仅因为咱们忘记了分号而运行和失败。这就是预加载器的用武之地。预加载器是咱们指定在主要任务之前运行的任何加载器。它们以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安装的，所以看看那里是否有人已经制作了你需要的东西。