WebPack初学者-WebPack基础与配置（二）-- Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训

此外，比起单单使用 JavaScript，使用 webpack 可以做的更多，你可以避免复制、贴上并通过 webpack 管理你的整个项目。

在下面的部分中，我们要使用 webpack 建立一个非常简单的网站。如果你想要跟着这个示例，建立一个像下方的目录结构：

介绍 Loaders - 我们将会加入 loader，这可以让我 bundle 加入的 CSS。

加入更多的 Plugins - 我们加入一个 plugin 来帮助我们建立和使用一个 HTML 文件。

开发服务器 - 我们会将 webpack 配置文件分为 development 和 production 两种版本，然后使用 webpack-dev-server 来查看我们的网站并启用 HMR。

开始编写代码 - 我们来实际写一些 JavaScript。

在稍早前面的教学课程中我提到了 loaders。这些写法来帮助我们 require 非 JavaScript 的文件。在这种情况下，我们将需要style-loader 和 css-loader。首先我们需要安装这些 loader：

现在安装完后，我们可以调整我们的 webpack 配置来引入 css-loader：

我们一个一个查看这些新属性：

module - 设定你的文件选项。

test - 一个正规表达式，用来找出要套用 loader 的文件。

loaders - 指定哪些 loader 是用于匹配前述 test （正规表达式）的文件。

loaders - 我们为应用程式所指定的一个 loader 阵列。

这个时候你执行 webpack，如果你 require 的档案结尾是 .css，我们会使用 style 和 css loader，将 CSS 加入到 bundle。

如果我们没有 loaders，我们会得到像是这样的错误：

如果你想要使用 SASS 而不是 CSS 你需要执行：

然后你的 loader 必须修改成：

处理 LESS 也类似于这个方式。

要知道这些需要被指定的 loader 是有顺序的，这是一个很重要部分。在上面的示例中，sass loader 是第一个应用在你的 .sass档案，然后是 css loader，最后是 style loader。你可以看到，这些 loader 的应用模式是由右到左。

现在我们的网站已经有了样式的基本架构，我们还需要一个实际的页面来套用这些样式。

我们通过 html-webpack-plugin 来做，它让我们可以产生一个 HTML 页面，或是使用现有的页面。我们将使用一个目前现有的index.html。

首先我们需要安装 plugin：

然后在我们的webpack配置文件中加入：

这个时候当你执行 webpack，因为我们指定了一个搭配 ./src/index.html template 的 HtmlWebpackPlugin ，它会产生一个文件名叫做 index.html 在我们的 dist 资料夹，而网页的内容是 ./src/index.html。

index.html 作为 template 如果是空的就没意义了，现在是个好时机我们可以填入一些元素进去。

注意到我们没有放入一个 bundle.js 的