laravel-mix 文档翻译

Posted 2020-09-10

英文文档在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"
  }