Webpack 5：初学者指南

经常听到开发人员说，他们不懂如何配置 webpack，因为配置文件的问题。今天我们学习如何使用 webpack 为 web 设置打包样式、JavaScript、图片和字体。

初次使用 Webpack 时，你可能会有很多疑问，难以理解它的工作原理和使用方法。我的目标是帮助你理解 Webpack。

让我们深入了解 webpack 初始化。

什么是 webpack 5？

简而言之，webpack是一个适用于现代 JavaScript 应用程序的静态模块打包器。我们不可能详尽介绍所有工具，而且像这样的新手指南也没有必要。

相反，我会尝试先列出一个小的核心列表。

• 基本配置

  • 入口点
  • 输出

• 装载机

  • 样式
  • 图片
  • 字体
  • Babel（JavaScript）

• 插件

  • HTML模板

• 模式

  • 发展

Webpack 基本配置入门

首先，创建一个目录，用于存放并启动项目。在此之前，我们将创建以下目录结构：

1. 创建项目

mkdir webpack-setup
cd webpack- setup
npm init -y # creates a default package.json

2. Webpack 设置

npm install webpack webpack-cli –-save-dev

我们将创建一个 src/app 文件夹来包含所有源文件。首先，我将创建一个简单的 index.js 文件。

3.基本配置

让我们在项目根目录下创建一个 webpack.config.js 文件。
点击 webpack.config.js

4. 入口与出口

在这个例子中，我们将入口点设置为 src/index.js。我们会将其输出到 dist 文件夹中，生产代码就是在这个文件夹中构建的。输出中的 [name] 将是 main。

5. 构建 Webpack

为了运行该脚本，我们可以创建一个运行 webpack 命令的构建脚本。

6.现在您可以运行它了。

npm run build

dist 文件夹已使用 main.bundle.js 创建。

现在我们的 webpack 构建已经成功。

在我们的示例中，我们将从Loader开始

1. 风格

对于样式，我们将安装样式加载器和 SCSS、PostCSS、CSS 加载器包。

• sass-loader – 用于 SCSS 和 CSS 编译
• node-sass – 用于 node sass
• postcss-loader - 使用 PostCSS 处理 CSS
• css-loader – 解析 CSS 导入
• style-loader – 将 CSS 注入 Dom

npm i sass-loader postcss-loader css-loader style-loader postcss-preset-env node-sass --save-dev

我们将创建 postCSS.config.js 文件并将其添加到根目录。

另外，在 webpack 配置文件中添加所有加载器。

运行构建，你会看到Sass和PostCSS已经被应用。

2. 图像

创建 src/images 并向其中添加图像，然后尝试将其导入到您的 index.js 文件中。

一旦加载了在 webpack.config.js 中配置的文件加载器

npm i file-loader --save-dev

您将获得我们想要精确路径的输出文件选项（dist/assets/images/**.jpg）。

3.字体

首先，将字体文件放入项目应用程序的一个文件夹中。

需要加载 url-loader 来实现功能。

npm i --save-dev url-loader

4. JavaScript

我们使用的babel-loader是 js。Babel 是下一代 JavaScript。Babel 也有一些额外的依赖项。

• babel-loader - 使用 webpack 转换文件。
• @babel/core——向后兼容的 JavaScript
• @babel/preset-env - Babel 的智能默认值
• @babel/plugin-proposal-class-properties - 自定义 Babel 配置

npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-env @babel/plugin-proposal-class-properties

现在我们将在 webpack.config.js 中添加一些用于加载 js 的代码。

我们在项目根目录中为 Babel 插件创建一个 .babelrc 文件。

运行 npm build，所有代码设置没有任何错误。

npm run build

5. HTML插件

如何配置 webpack 使用
HtmlWebpackPlugin来生成 HTML ？该插件会根据模板创建文件。首先，安装该插件。

npm install html-webpack-plugin --save-dev

在 src 文件夹中创建一个 template.html 文件。我们可以将配置“ title ”选项的哈希值传递给 html-webpack-plugin。 同时在 webpack 配置文件中添加代码来构建 HTML。 现在再次运行构建。可以看到 dist 文件夹中现在包含一个 包含 bundle 的 index.html 文件。

6.发展模式

为了进行开发设置，我们将安装webpack-dev-server。Webpack 为我们提供了轻松安装具有实时重新加载功能的服务器的选项
。

• webpack-dev-server - webpack 开发服务器 ```

npm install --save-dev webpack-dev-server

Again add a line `mode:'development'` to webpack.config.js file. and for run server add a script in package.json:

![Webpack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7vll5vo6z6qg8dbbjyww.png)
![Webpack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m25fpgqm6g8dbszfotjh.png)

npm 启动

When running this command, a link to **localhost:8080** will automatically pop up in your browser

That shall be enough to get you to start with webpack! We've covered all (Basic,Plugins,Loaders) of the basic Webpack concepts. For further exploration of webpack’s capabilities we recommend official docs [Webpack](https://webpack.js.org/)

Hope you like it guys here we end our Webpack basic setup! Thank you so much for reading the post.

I am working on Dash UI project which build on gulp js.[Dash UI](https://github.com/codescandy/Dash-UI) 

Happy Coding :)