前端开发中，打包工具是一个非常重要的环节，可以将多个 JS/CSS 文件合并和压缩成一个或少量的文件，从而提高页面加载速度，减小网络资源的请求数量。目前，市面上有很多非常好用的打包工具，比如：Webpack、Grunt、Gulp、Rollup 等。但是，Webpack 作为一个具有高度可定制性和扩展性的打包工具，占据了越来越多的市场份额。
为什么选择Webpack
与其它打包工具相比，Webpack 具有以下特点：
- 更强大的模块化。Webpack允许你引入非常灵活的模块系统，允许你将所有的资源都视为模块，并允许你更深入地控制模块依赖图，这使得构建大型应用程序更加容易。
- 更全面的生态系统。比如，通过精心设计的Webpack插件，您可以轻松地添加和重复使用各种应用程序元素，而不会影响您的构建流程。
- 更高效的构建。Webpack 在构建过程中使用了缓存技术，可以防止重复打包已经打包完成的模块，显著提高打包速度。
- 支持任何语言。Webpack 可以处理 JavaScript、CSS、SASS、LESS、TypeScript、React、Vue 等多种语言，且支持插件扩展，所以我们可以更加灵活地定制自己的构建流程。
基本配置及使用
下面，我们将讲解如何使用 Webpack 打包工具。
安装Webpack
全局安装webpack：
--- ------- ------- --
或局部安装：
--- ------- ------- --
然后我们需要安装节点 http-server ，方便我们开启本地服务器。
--- ------- ----------- --
创建项目结构
在项目根目录下，我们需要创建以下文件夹和文件：
---- -- ------- ----------- --- -- ------ ---------- -- --- ----------------- -- ------- ----
配置webpack.config.js
在webpack.config.js中定义如何打包和转换应用程序的代码，然后输出到 dist 目录：
-------------- - -
------ -----------------
------- -
----- --------- - --------
--------- -----------
-
--上述配置很简单，但就足够为我们的代码创建一个工作的 Webpack 构建 。
创建主页面
在 index.html 文件中添加以下内容：
--------- -----
------
------
----- ----------------
-------------- ------------
-------
------
---- ----------------
------- -------------------------
-------
-------上述代码将我们的JS代码加载到页面中。
创建JS源码
在 src 目录下新建以下文件：
--- -- -------- -- ----------
并在 index.js 中引用 message.js 文件：
------ - ------- - ---- ------------ ------------------------
并在 message.js 中设置 message 字符串：
------ ----- ------- - ------- ---------
这将创建一个非常简单的程序，用于将“ Hello，Webpack”写入首页。
运行Webpack
接下来，在命令行中输入以下命令运行Webpack：
-------
或者，使用以下命令打包并启动本地服务器：
--- --- ----- -- ----------- ----
在浏览器中打开 Webpack 生成的 index.html 文件，你应该看到“ Hello，Webpack”呈现在页面上。
常用插件
Webpack 还提供了很多实用的插件，用于完成不同的任务，如代码优化、模块管理、文件压缩等。
####uglifyjs-webpack-plugin
用于压缩 JS 文件，可以简单的添加到 Webpack 插件中以实现压缩：
----- -------------- - -----------------------------------
-------------- - -
-------- -
--- ----------------
-
--####ExtractTextPlugin
将 CSS 文件拆分，进一步优化打包。如果你的页面中带有大量的样式，你可以使用 ExtractTextPlugin 插件将 CSS 单独提取出来，这样可以更快地加载页面：
----- ----------------- - ---------------------------------------
-------------- - -
------- -
------ -
-
----- ---------
---- ---------------------------
--------- ---------------
---- ------------
--
-
-
--
-------- -
--- ------------------------------
-
--####html-webpack-plugin
插入生成的 JS 代码包含的文件：
----- ----------------- - -------------------------------
-------------- - -
-------- -
--- -------------------
------ -------- ------
--------- -------------
--------- -------------
------- -------
--
-
--上述代码将把打包后的 JS 文件注入到 index.html 文件中，包含所有引用的文件。
总结
这里仅仅介绍了Webpack的入门和基本的用法，实际上Webpack具备非常强大的定制化能力，尤其是对大型应用程序打包、优化等方面有很好的支持，希望读者可以在实践中深入了解Webpack，进一步发挥优化功能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/649bf56748841e98948b9333