在前端开发中，Webpack 是一个非常流行的模块打包工具，它凭借着其强大的功能和灵活的插件机制逐渐取代了 RequireJS 和 Browserify。但是在使用 Webpack 时，我们经常需要编写一些复杂的配置文件，这对于新手来说是一项相当具有挑战性的任务。
为了让开发者更加方便地使用 Webpack，Laravel 提供了一个名为 laravel-elixir-webpack-official 的 NPM 包。在这篇文章中，我们将向大家介绍如何使用 laravel-elixir-webpack-official 进行 Webpack 打包。
安装 laravel-elixir-webpack-official
使用 npm 安装 laravel-elixir-webpack-official 相对来说比较简单。我们可以通过以下命令进行安装：
--- ------- ------------------------------- ----------
然后你需要在你的 gulpfile 中显示地引入这个包。你可以在下列的范例中看到这个引用的例子：
--- ------ - --------------------------
-------------------------------------------
-------------------- -
----------------------
---上面这段代码中，我们首先引用了 laravel-elixir-webpack-official 包，然后通过 mix.webpack('app.js') 命令进行 Webpack 打包。
值得一提的是，需要至少安装 Webpack 2.2 版本来使用 laravel-elixir-webpack-official。
laravel-elixir-webpack-official 的基本用法
接下来，我们来介绍 laravel-elixir-webpack-official 的基本使用方法。
在开始使用之前，我们需要先了解一下整个打包的流程：
打包前，它会先执行 Laravel Elixir 文件清理任务，如下：
--------------------------- ----------
然后会执行 Webpack 模块打包任务：
----------------------
最后执行 Laravel Elixir 文件复制任务：
------------------------- --------------------
其中，“app.js” 是需要打包的 JavaScript 模块文件名。
使用 laravel-elixir-webpack-official 进行 Webpack 打包，一共有两种方式：
mix.webpack()
这是使用 laravel-elixir-webpack-official 进行打包的基础命令，不需要任何配置。下面是一个使用示例：
----------------------
mix.webpackConfig()
这个命令可以让开发者结合 Webpack 自定义配置项，例如：
-------------------
------- -
-------------- ----------------------
----------- ----
--
-------- -
--- -------------------------------------
----- --------
---
--- -----------------------------
--------- -----
---
--- ----------------------
----------------------- -----------------------------
---
--- ---------------------------------
--------- -
--------- ------
--
---
--
---上面这段代码中，我们对 Webpack 的输出进行了一些自定义配置，以及配置了一些 Webpack 插件。
这实在是非常强大啊！在 laravel-elixir-webpack-official 的帮助下，我们轻轻松松就能配置出我们需要的 Webpack 打包配置。
laravel-elixir-webpack-official 的高级使用方法
在掌握了 laravel-elixir-webpack-official 的基础用法之后，我们也可以通过扩展它的方式来实现各种高级配置需求。
如何扩展呢？简单来说就是利用 gulp 的自定义任务机制，在 elixir 中定义新的任务。
这是一个常见的示例，让 elixir 支持多页面打包配置：
-------------------- -
------------------
-
------ -
---- ---------------------- ------ ----------
--------- ---------------------- ------ ---------------
--
------- -
----- ---------------------- ------------------
--------- -------------------
--
-------- ---
--
---
---mix.webpackMulti() 函数支持多个 entry 以及其它的配置。
总结
使用 laravel-elixir-webpack-official，可以让我们的前端工程化开发更加方便和高效，但这并不是一个简单的 npm 包，它有很多高级用法，需要我们在实际项目中不断去实践和完善。
希望本篇文章对大家能有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/69850