本文介绍了如何使用 Webpack 4 搭建前端工程项目的过程，并且详细讲解了如何进行优化部署，希望对正在学习前端的同学们有所帮助。
前置知识
- 基本的 HTML、CSS、JS 知识
- Node.js 知识
Webpack 简介
Webpack 是一个用于打包 Web 应用程序的工具，它的目的是将多个 JavaScript 文件打包成单个文件，以便于在网页中引用。
它还有一个非常重要的功能，就是可以使用各种插件和加载器来扩展其功能，例如使用插件来优化代码、压缩文件大小以及使用加载器来处理各种类型的文件。
Webpack4 安装
可以通过以下命令来安装 Webpack4：
npm install webpack webpack-cli --save-dev
- webpack：Webpack 的核心模块。
- webpack-cli：Webpack 的命令行界面。
在安装完成后，我们需要创建一个项目文件夹，并在该文件夹中创建一个 package.json 文件，用于在项目中管理依赖项。可以使用以下命令来创建一个 package.json 文件：
npm init -y
搭建脚手架
接下来我们需要搭建一个 Webpack 的脚手架，用于快速启动我们的项目。首先，我们需要创建一个 webpack.config.js 文件：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- ----------
--
--这个配置文件表示，我们的入口文件是 src/index.js，打包后的文件会被放在 dist 目录下，文件名为 main.js。
在 package.json 文件中添加我们将要使用的命令：
"scripts": {
"build": "webpack --config webpack.config.js"
},现在，我们可以使用以下命令来构建项目：
npm run build
使用加载器处理 CSS
在我们的项目中，处理 CSS 文件也非常重要。Webpack 默认不支持 CSS 文件，我们需要使用加载器来帮助我们处理 CSS 文件。
安装所需要的加载器：
npm install css-loader style-loader sass-loader sass webpack --save-dev
解释一波各个 Loader 和插件：
- css-loader：在打包时处理 CSS 文件。
- style-loader：将 CSS 插入 DOM 中，让 CSS 生效。
- sass-loader：在打包时处理 Scss 文件。
- sass：Scss 的编译器。
- webpack：Webpack 的核心模块。
更新我们的 webpack.config.js 文件：
-- -------------------- ---- -------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- ----------
--
------- -
------ -
-
----- ----------
---- ---------------- ------------- ---------------
--
--
--
--在我们应用的JS代码中引入CSS文件，如下：
import './main.scss';
现在，我们的 Webpack 就已经可以处理 CSS 文件了。
使用 Babel 处理 ES6
ES6 的语法已经成为了 Web 开发的事实标准，但是一些旧版本的浏览器并不支持 ES6。我们需要使用 Babel 将 ES6 转换成 ES5。
安装我们所需要的加载器：
npm install babel-loader @babel/core @babel/preset-env --save-dev
解释一波各个 Loader 和插件：
- babel-loader：用于转换 ES6 代码。
- @babel/core：Babel 的核心模块。
- @babel/preset-env：提供了将 ES6 转换为 ES5 的规则。
更新我们的 webpack.config.js 文件：
-- -------------------- ---- -------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- ----------
--
------- -
------ -
-
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
--
-
----- ----------
---- ---------------- ------------- ---------------
--
--
--
--现在，我们的 Webpack 已经可以将 ES6 转换成 ES5 了。
优化部署
在我们的项目中，我们需要考虑如何优化部署，以提高 Web 应用程序的加载速度。
压缩文件大小
Webpack 可以使用以下插件来压缩文件大小：
npm install --save-dev uglifyjs-webpack-plugin
在 webpack.config.js 中引入该插件，如下：
-- -------------------- ---- -------
----- -------------- - -----------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- ----------
--
------------- -
---------- ---- ------------------
--
------- -
------ -
-
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
--
-
----- ----------
---- ---------------- ------------- ---------------
--
--
--
--现在，我们的 JavaScript 文件将被压缩。
分离 CSS
Webpack 可以使用以下插件来分离 CSS 文件：
npm install --save-dev mini-css-extract-plugin
在 webpack.config.js 中引入该插件，如下：
-- -------------------- ---- -------
----- -------------------- - -----------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- ----------
--
------------- -
---------- ---- ------------------
--
-------- ---- ------------------------
------- -
------ -
-
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
--
-
----- ----------
---- ----------------------------- ------------- ---------------
--
--
--
--将 MiniCssExtractPlugin.loader 添加到 SCSS 文件的加载器中，即可将所有 CSS 分离出来，我们可以通过以下命令来构建项目：
npm run build
总结
通过本文，我们了解了 Webpack4 的基本安装过程以及如何使用各种 Loader 和插件来处理我们的 Web 应用程序。
我们还介绍了如何优化部署以提高 Web 应用程序的性能，从而使用户能够更快速地加载我们的应用程序。
如果你正在学习前端开发，希望本篇文章能够对你有所帮助。
附上 webpack 配置文件：
-- -------------------- ---- -------
----- ---- - ----------------
----- -------------- - -----------------------------------
----- -------------------- - -----------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- ----------
--
------------- -
---------- ---- ------------------
--
-------- ---- ------------------------
------- -
------ -
-
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
--
-
----- ----------
---- ----------------------------- ------------- ---------------
--
--
--
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b0d8edadd4f0e0ffa32a29