英文文档在github上
概览
- 基本示例
- 安装
- laravel 工作流程
- laravel mix VS laravel Elixir
- 常见问题
API
- JavaScript
- 代码拆分
- browserSync
- HMR
- 版本
- CSS预处理
- 拷贝文件/目录
- 系统通知
- 合并和压缩
- 自动加载
- 事件钩子
- 自定义webpack配置
常用插件
- LiveReload
- jQueryUI
高级配置
- laravel-mix 选项
基本示例
larave-mix是在webpack上的一个简洁的层，使80%的用例执行起来变的可笑的简单。尽管webpack非常的强大，但很多人都认为webpack的学习曲线非常陡峭。但是如果你不必用再担心这些了呢？
看一下基本的webpack.mix.js文件，让我们想象一下我们现在只需要编译javascript(ES6)和sass文件：
let mix = require(‘laravel-mix‘); mix.sass(‘src/app.sass‘, ‘dist‘) .js(‘src/app.js‘, ‘dist‘);
怎么样，简单吗？
1. 编译sass文件, ./src/app.sass到 ./dist/app.css
2. 打包在./src/app.js的所有js(包括任何依赖)到 ./dist/app.js。
使用这个配置文件，可以在命令行触发webpack指令：node_modules/bin/webpack
在开发模式下，并不需要压缩输出文件，如果在执行webpack的时候加上环境变量：export NODE_ENV=production && webpack,文件会自动压缩
less
但是如果你更喜欢使用Less而不是Sass呢？没问题，只要把mix.sass()换成mix.less()就OK了。
使用laravel-mix，你会使发现大部分webpack任务会变得更又把握
安装
尽管laravel-mix对于laravel使用来说最优的，但也能被用于任何其他的应用。
laravel项目
laravel已经包含了你所需要的一切，简易步骤：
1. 安装laravel
2. 运行 npm install
3. 看一下你的webpack.mix.js ，然后就done了
你可以在命令行运行 npm run watch 来监视你的前段资源改变，然后重新编译。
注：在项目根目录下并没有webpack.config.js配置文件，laravel默认指向根目录下的配置文件。如果你需要自己配置它，你可以把它拷贝到根目录下，同时修改package.json里的npm脚本： cp node_modules/laravel-mix/setup/webpack.config.js ./.
独立项目
首先使用npm或者yarn安装laravel-mix，然后把示例配置文件复制到项目根目录下
mkdir my-app && cd my-app npm init -y npm install laravel-mix --save-dev cp -r node_modules/laravel-mix/setup/** ./
现在你会有如下的目录结构
- node_modules/
- package.json
- webpack.config.js
- webpack.mix.js
laravel-mix 包括两个核心组件
- webpack.mix.js: 这是你在webpack上层的配置文件，大部分时间你需要修改的是这个文件
- webpack.config.js: 这是传统的webpack配置文件，只有在有更高级的配置需求时才需要更改
打开你的webpack.mix.js文件：
let mix = require(‘laravel-mix‘); mix.js(‘src/app.js‘, ‘dist‘) .sass(‘src/app.scss‘, ‘dist‘);
注意源文件的路径，然后创建匹配的目录结构(你也可以改成你喜欢的结构)。现在都准备好了，在命令行运行node_modules/.bin/webpack 编译所有文件，然后你将会看到：
- dist/app.css
- dist/app.js
- dist/mix-manifest.json(你的asset输出文件，稍后讨论)
干得漂亮！现在可以干活了。
NPM Scripts
把下面的npm脚本添加到你的package.json文件中可以让你的工作更快，laravel安装的时候已经包含了这个东西了
"scripts": {
"dev": "cross-env NODE_ENV=development webpack --progress --hide-modules",
"watch": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules",
"hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot",
"production": "cross-env NODE_ENV=production webpack --progress --hide-modules"
}