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