简介
Laravel Mix iW 是一个前端构建工具，它基于 Laravel Mix 的基础上进行了扩展，可以快速地构建 Vue 项目和多页应用。Laravel Mix iW 的特色是支持全自动打包编译，带有多个默认的配置，使得开发者可以快速的将代码打包成生产环境所需要的文件。
安装
在使用 Laravel Mix iW 之前，需要先进行安装。
在终端中输入以下命令进行安装：
--- ------- -------------- --
使用
使用 Laravel Mix iW 前，需要在项目根目录下创建一个 webpack.mix.js 文件。
然后，我们需要在这个文件中引用 Laravel Mix iW 和其他一些必要的模块，示例如下：
----- --- - -------------------------- ----- ---- - ---------------- ----------------------- - ----- -- ------- -- -- --- ------ ---------------------------- -- -------- ----------------------------- ------------ -------------------------------- ------------- ----------- -- -------
在 webpack.mix.js 中，我们可以根据项目需要选择性地设置各种参数来实现构建。
下面介绍一些 Laravel Mix iW 的常用配置：
热更新
如果想要在开发过程中实现热更新，可以在 webpack.mix.js 中加入以下代码：
----------------- ------ ------------------------ -- -------- ----- ----- --
然后，在命令行中执行以下命令：
--- --- -----
预处理器
Laravel Mix iW 默认支持的预处理器有 Less、Sass 和 Stylus，我们可以在 webpack.mix.js 中配置：
-- -- ------ -- --------------------------------------- -------------
需要先安装对应的 npm 包：
--- ------- ------ --
Vue
使用 Laravel Mix iW 可以快速构建 Vue 单文件组件，只需要在 webpack.mix.js 文件中加入以下代码：
----------------------------- ------------ ------
需要先安装 vue-loader 和 vue-template-compiler：
--- ------- ---------- --------------------- --
静态资源拷贝
如果我们需要将项目中的静态资源拷贝到打包后的目录中，可以使用以下代码：
---------------------------- -----------------
打包优化
在对项目进行打包时，我们可以使用以下代码进行优化：
----------------------------- ------------
---------------- -------- ----------
--------------
-------- -------------------------------------------
--以上代码主要实现了如下优化：
- 对第三方库进行单独打包，可以减小文件体积
- 添加 Babel 插件，可以将 class 属性转换为箭头函数，提高执行效率
结论
Laravel Mix iW 是一个非常好用的前端构建工具，它提供了许多快捷的 API 和默认的配置，可以帮助我们快速构建项目。
当然，本文只是对 Laravel Mix iW 的一些常用设置做了简要介绍。如果想要深入了解 Laravel Mix iW 的各种高级配置，请访问官方文档。
参考链接
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64410