Webpack 教程：如何从零开始为基本网站配置 Webpack 4 或 5

🌼 简介

🎈 我们的目标

🔧 开始

🔬 加载器

🔌插件

🔬 更多加载器：图像和字体

🏆 总结

🌼 简介

你好，读者！🐱

你可能知道，配置Webpack可能是一项令人沮丧的任务。尽管有完善的文档，但由于一些原因，这款打包工具的使用体验并不轻松。

Webpack 团队非常努力，开发速度也相对较快，这是一件好事。然而，对于新手开发者来说，一次性学习所有东西会让人不知所措。教程越来越老，一些插件会崩溃，示例也越来越令人困惑。有时你可能会被一些琐碎的事情卡住，不得不在 GitHub 问题中搜索大量信息，最终找到一些有用的信息。

缺乏关于 Webpack 及其工作原理的介绍性文章，人们直接使用create-react-app或vue-cli等工具，但有时需要编写一些简单的纯 JavaScript 和 SASS，不需要框架或任何花哨的东西。

本指南将逐步讲解如何在不使用任何框架的情况下，使用 Webpack 来配置 ES6、SASS 以及图片/字体。它足以帮助您入门，构建大多数简单的网站，或将其作为进一步学习的平台。虽然本指南需要一些 Web 开发和 JavaScript 方面的知识，但它或许对某些人有用。至少，在我刚开始学习 Webpack 的时候，如果能遇到这样的指南，我会非常开心！

🎈 我们的目标

我们将使用 Webpack 将 JavaScript、样式、图像和字体文件捆绑到一个dist文件夹中。

Webpack 将生成 1 个打包的 JavaScript 文件和 1 个打包的 CSS 文件。你可以像下面这样直接将它们添加到 HTML 文件中（当然，如果需要，你应该将路径更改为 dist 文件夹）：

<link rel="stylesheet" href="dist/bundle.css">
<script src="dist/bundle.js"></script>

你一切顺利🍹

您可以从本指南中查看完成的示例：🔗链接。

注意：我最近更新了依赖项。本指南适用于最新的 Webpack 5，但如果您需要，配置仍适用于 Webpack 4！

🔧 开始

1.安装Webpack

我们使用npm :$ npm init命令在项目文件夹中创建一个package.json文件，用于存放 JavaScript 依赖项。然后，我们可以使用 来安装 Webpack 本身$ npm i --save-dev webpack webpack-cli。

2.创建入口点文件

Webpack 从一个 JavaScript 文件（称为入口点）开始工作。在javascript文件夹中创建index.js 文件。您可以在此处编写一些简单的代码，以确保其正常运行。console.log('Hi')

3.创建webpack.config.js

... 在项目文件夹中。所有✨魔法都在这里发生。

// Webpack uses this to work with directories
const path = require('path');

// This is the main configuration object.
// Here, you write different options and tell Webpack what to do
module.exports = {

  // Path to your entry point. From this file Webpack will begin its work
  entry: './src/javascript/index.js',

  // Path and filename of your result bundle.
  // Webpack will bundle all JavaScript into this file
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '',
    filename: 'bundle.js'
  },

  // Default mode for Webpack is production.
  // Depending on mode Webpack will apply different things
  // on the final bundle. For now, we don't need production's JavaScript 
  // minifying and other things, so let's set mode to development
  mode: 'development'
};

4.在package.json中添加npm脚本来运行Webpack

要运行 Webpack，我们必须使用 npm script 的简单命令webpack，并将我们的配置文件作为配置选项。我们的package.json目前应该如下所示：

{
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  "devDependencies": {
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3"
  }
}

5. 运行 Webpack

完成这些基本设置后，你就可以运行$ npm run build命令了。Webpack 会查找我们的入口文件，解析其中所有导入的模块依赖，并将其打包成dist文件夹中的单个.js文件。在控制台中，你应该会看到类似这样的内容：

如果您将<script src="dist/bundle.js"></script>其添加到 HTML 文件中，您应该会Hi在浏览器控制台中看到！

🔬 加载器

太棒了！我们已经打包好了标准 JavaScript。但是，如果我们想使用 ES6（及更高版本）的所有酷炫功能，同时又保持浏览器兼容性，该怎么办呢？我们应该如何告诉 Webpack 将 ES6 代码转换（transpile）为浏览器兼容的代码？

这就是 Webpack加载器发挥作用的地方。加载器是 Webpack 的主要功能之一。它们对我们的代码进行某些转换。

让我们在webpack.config.js文件中添加新的选项module.rules。在这个选项中，我们将告诉 Webpack 应该如何转换不同类型的文件。

entry: /* ... */,
output: /* ... */,

module: {
  rules: [
  ]
}

对于 JavaScript 文件，我们将使用：

1. babel-loader

Babel是目前最好的 JavaScript 转译器。我们将告诉 Webpack 在打包之前使用它来将我们的现代 JavaScript 代码转换为浏览器兼容的 JavaScript 代码。

Babel-loader 就是干这个的。我们来安装它：
$ npm i --save-dev babel-loader @babel/core @babel/preset-env

现在我们要添加有关 JavaScript 文件的规则：

rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
]

• test是我们要转换的文件扩展名的正则表达式。在我们的例子中，它是 JavaScript 文件。
• exclude是一个正则表达式，它告诉 Webpack 在转换模块时应该忽略哪个路径。这意味着，如果我们将来从 npm 导入供应商库，则无需转换它们。
• use是主规则的选项。这里我们设置了 loader，它将应用于与testregexp 对应的文件（在本例中为 JavaScript 文件）。
• options可能会因加载器而异。在本例中，我们为 Babel 设置了默认预设，以考虑哪些 ES6 特性应该转换，哪些不需要。这是一个独立的主题，如果您感兴趣，可以深入研究，但目前先这样理解比较安全。

现在您可以安全地将 ES6 代码放入 JavaScript 模块中！

2. sass-loader

是时候处理样式了。通常，我们不想编写纯 CSS。我们经常使用SASS预处理器。我们将 SASS 转换为 CSS，然后应用自动添加前缀和压缩功能。这是一种“默认”的 CSS 处理方法。让我们告诉 Webpack 这样做。

假设我们在javascripts/index.js入口点导入主 SASS 文件sass/styles.scss 。

import '../sass/styles.scss';

但目前，Webpack 还不知道如何处理.scss文件或除.js之外的任何文件。我们需要添加合适的加载器，以便 Webpack 能够解析这些文件：
$ npm i --save-dev sass sass-loader postcss-loader css-loader

我们可以为 SASS 文件添加一条新规则并告诉 Webpack 如何处理它们：

rules: [
    {
      test: /\.js$/,
      /* ... */
    },
    {
      // Apply rule for .sass, .scss or .css files
      test: /\.(sa|sc|c)ss$/,

      // Set loaders to transform files.
      // Loaders are applying from right to left(!)
      // The first loader will be applied after others
      use: [
             {
               // This loader resolves url() and @imports inside CSS
               loader: "css-loader",
             },
             {
               // Then we apply postCSS fixes like autoprefixer and minifying
               loader: "postcss-loader"
             },
             {
               // First we transform SASS to standard CSS
               loader: "sass-loader"
               options: {
                 implementation: require("sass")
               }
             }
           ]
    }
]

这里需要注意的是，Webpack 可以串联多个 loader；它们会按照数组中的顺序，从最后一个到第一个依次被应用use。

现在，当 Webpack 遇到import 'file.scss';代码时，它知道该做什么！

PostCSS

我们应该如何告诉postcss-loader它必须应用哪些转换？我们创建一个单独的配置文件postcss.config.js，并使用我们需要的 postcss 插件来实现样式。你可能会发现，压缩和自动添加最基本、最有用的插件，以确保 CSS 能够适用于你的实际网站。

首先，安装这些 postcss 插件：$ npm i --save-dev autoprefixer cssnano。

其次，将它们添加到postcss.config.js文件中，如下所示：

module.exports = {
    plugins: [
        require('autoprefixer'),
        require('cssnano'),
        // More postCSS modules here if needed
    ]
}

您可以深入了解PostCSS并找到更多适合您的工作流程或项目要求的插件。

完成所有 CSS 设置后，只剩下一件事了。Webpack 会解析你的.scss导入，对其进行转换，然后……接下来呢？它不会神奇地创建一个包含所有样式的.css文件；我们必须告诉 Webpack 去做这件事。但这项任务超出了 loader 的能力范围。我们必须使用 Webpack 的插件来完成。

🔌插件

它们的作用是完成加载器无法完成的其他工作。如果我们需要将所有转换后的 CSS 提取到一个单独的“bundle”文件中，就必须使用插件。有一个插件特别适合我们的情况：MiniCssExtractPlugin：
$ npm i --save-dev mini-css-extract-plugin

我们可以在webpack.config.js文件的开头单独导入插件：

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.rules在我们设置加载器的数组之后添加新plugins代码，在其中使用选项激活我们的插件：

module: {
  rules: [
    /* ... */
  ]
},
plugins: [

  new MiniCssExtractPlugin({
    filename: "bundle.css"
  })

]

现在我们可以将此插件链接到我们的 CSS 加载器中：

{
      test: /\.(sa|sc|c)ss$/,
      use: [
             {
               // After all CSS loaders, we use a plugin to do its work.
               // It gets all transformed CSS and extracts it into separate
               // single bundled file
               loader: MiniCssExtractPlugin.loader
             }, 
             {
               loader: "css-loader",
             },
             /* ... Other loaders ... */
           ]
}

完成了！如果你照着做了，就可以运行$ npm run build命令并在dist文件夹中找到bundle.css文件。常规设置现在应该如下所示：

Webpack 有大量用于不同用途的插件。你可以根据需要在官方文档中探索它们。

🔬 更多加载器：图像和字体

至此，你应该已经了解了 Webpack 的基本工作原理。但我们还没说完。大多数网站都需要一些资源：我们通过 CSS 设置的图片和字体。Webpack 可以background-image: url(...)通过css-loader解析行，但如果你将 URL 设置为.png或jpg文件，它就不知道该如何处理了。

我们需要一个新的加载器来处理 CSS 中的文件，或者能够直接在 JavaScript 中导入它们。它就是：

文件加载器

安装它并向我们的webpack.config.js$ npm i --save-dev file-loader添加一条新规则：

rules: [
    {
      test: /\.js$/,
      /* ... */
    },
    {
      test: /\.(sa|sc|c)ss$/,
      /* ... */
    },
    {
      // Now we apply rule for images
      test: /\.(png|jpe?g|gif|svg)$/,
      use: [
             {
               // Using file-loader for these files
               loader: "file-loader",

               // In options we can set different things like format
               // and directory to save
               options: {
                 outputPath: 'images'
               }
             }
           ]
    }
]

现在如果你在 CSS 中使用一些像这样的图像：

body {
  background-image: url('../images/cat.jpg');
}

Webpack 会成功解析它。你会在dist/images文件夹中找到带有哈希名称的图片。在bundle.css文件中，你会发现类似这样的内容：

body {
  background-image: url(images/e1d5874c81ec7d690e1de0cadb0d3b8b.jpg);
}

正如您所见，Webpack 非常智能——它可以正确解析相对于dist文件夹的 url 路径！

您也可以为字体添加规则并以与图像类似的方式解析它们；将 outputPath 更改为字体文件夹以保持一致性：

rules: [
    {
      test: /\.js$/,
      /* ... */
    },
    {
      test: /\.(sa|sc|c)ss$/,
      /* ... */
    },
    {
      test: /\.(png|jpe?g|gif|svg)$/,
      /* ... */
    },
    {
      // Apply rule for fonts files
      test: /\.(woff|woff2|ttf|otf|eot)$/,
      use: [
             {
               // Using file-loader too
               loader: "file-loader",
               options: {
                 outputPath: 'fonts'
               }
             }
           ]
    }
]

🏆 总结

就这样！一个经典网站的简单 Webpack 配置就完成了。我们讲解了入口点、加载器和插件的概念，以及 Webpack 如何转换和打包文件。

当然，这是一个相当简单的配置，旨在帮助您了解 Webpack 的基本概念。如果您需要，还可以添加很多东西：源映射、热重载、设置 JavaScript 框架以及 Webpack 可以做的所有其他事情，但我觉得这些内容超出了本指南的范围。

如果你遇到困难或想了解更多信息，我鼓励你查看 Webpack官方文档。祝你打包愉快！