lavaral中文手册_Laravel-mix 中文文档

概览

基本示例

larave-mix 是位于webpack顶层的一个简洁的配置层，在 80% 的情况下使用 laravel mix 会使操作变的非常简单。尽管 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 文件 ，就可以开始使用了.

你可以在命令行运行 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/webpack.mix.js ./

现在你会有如下的目录结构

node_modules/

package.json

webpack.mix.js

webpack.mix.js 是你在webpack上层的配置文件，大部分时间你需要修改的是这个文件

首先看下 webpack.mix.js 文件

let mix = require('laravel-mix');

mix.js('src/app.js', 'dist')

.sass('src/app.scss', 'dist')

.setPublicPath('dist');

注意源文件的路径，然后创建匹配的目录结构(你也可以改成你喜欢的结构)。现在都准备好了，在命令行运行 node_modules/.bin/webpack 编译所有文件，然后你将会看到：

dist/app.css

dist/app.js

dist/mix-manifest.json(你的asset输出文件，稍后讨论)

干得漂亮！现在可以干活了。

NPM Scripts

把下面的npm脚本添加到你的 package.json 文件中可以加速你的工作操作.，laravel安装的时候已经包含了这个东西了

"scripts": {

"dev": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",

"watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",

"hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",

"production": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"

}

laravel工作流程

我们先回顾一下通用的工作流程以便你能在自己的项目上采用

1 . 安装laravel

laravel new my-app

2 . 安装Node依赖

npm install

3 . 配置 webpack.mix.js

这个文件所有前端资源编译的入口

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js');

mix.sass('resources/assets/sass/app.scss', 'public/css');

默认会启用 JavaScript ES2017 + 模块绑定，就行sass编译一样。

4 . 编译

用如下指令编译

node_modules/.bin/webpack

也可以使用package.json 里的npm脚本：

npm run dev

然后会看到编译好的文件：

./public/js/app.js

./public/css/app.css

监视前端资源更改：

npm run watch

laravel自带了一个 ./resources/assets/js/components/Example.vue 文件，运行完成后会有一个系统通知。

5 . 更新视图

laravel自带一个欢迎页面，我们可以用这个来做示例，修改一下：

Laravel

刷新页面，干得漂亮！

常见问题

laravel-mix必须在laravel下使用吗？

不，在laravel下使用使最好的，但也可以用在别的任何项目

我的代码没有压缩

只有在node环境变量为生产环境时才会被压缩，这样会加速编译过程，但在开发过程中是不必要的，下面是在生成环境下运行webpack的示例

export NODE_ENV=production && webpack --progress --hide-modules

强烈推荐你把下面的npm脚本添加到你的package.json文件中，注意laravel已经包括了这些了

"scripts": {

"dev": "NODE_ENV=development webpack --progress --hide-modules",

"watch": "NODE_ENV=development webpack --watch --progress --hide-modules",

"hot": "NODE_ENV=development webpack-dev-server --inline --hot",

"production": "NODE_ENV=production webpack --progress --hide-modules"

},

我使用的是VM，webpack不能检测到我的文件变化

如果你在VM下执行 npm run dev，你会发现 webpack 并不能监视到你的文件改变。如果这样的话，有两种方式来解决这个

配置 webpack 检测文件系统的变化, 注意:检测文件系统是资源密集型操作并且很耗费电池的使用时长.

转发文件通过使用类似于 vagrant-fsnotify 之类的东西将通知发送给VM。注意，这是一个 只有 Vagrant 才有的插件。

检测 VM 文件系统变化, 修改一下你的 npm 脚本，使用 --watch-poll 和 --watch 标签，像这样：

"scripts": {

"watch": "NODE_ENV=development webpack --watch --watch-poll",

}

推送文件改动到 VM, 在主机安装 vagrant-fsnotify

vagrant plugin install vagrant-fsnotify

现在你可以配置 vargrant 来使用这个插件, 在 Homestead 中, 在你的 Homestead.yaml 文件类似于这样

folders:

-

map: /Users/jeffrey/Code/laravel

to: /home/vagrant/Code/laravel

options:

fsnotify: true

exclude:

- node_modules

- vendor

一旦你的 vagrant 机器启动, 只需要在主机上运行 vagrant fsnotify 把文件的改动推送到 vm 上, 然后在 vm 内部运行 npm run watch 就能够检测到文件的改动了.

如果你还是有问题，去这儿溜达溜达吧。

为什么在我的css文件里显示图片在node_modules里找不到

你可能用的是相对路径，但是在你的 resources/assets/sass/app.css 里并不存在：

body {

background: url('../img/example.jpg');

}

当引用相对路径的时候，会根据当前文件的路径来搜索，同样的，webpack会首先搜索 `resources/assets/img/example.jpg ，如果找不到，会继续搜索文件位置，包括node_modules,如果还找不到，就报错：

ERROR Failed to compile with 1 errors

This dependency was not found in node_modules:

有两个解决办法：

1 . 让 resources/assets/img/example.jpg 存在这个文件.

2 . 编译 css 的时候添加下面的选项，禁用css的url处理：

mix.sass('resources/assets/sass/app.scss', 'public/css')

.options({

processCssUrls: false

});

他对老项目特别有用，因为你的文件夹结构已经完全创建好了。

我不想把mix-manifest.json文件放在项目根目录下

如果你没有使用 laravel，你的 mix-manifest.json 文件会被放到项目根目录下，如果你不喜欢的话，可以调用 mix.setPublicPath('dist/')，然后manifest文件就会被放到dist目录下。

怎样使用webpack自动加载模块

webpack 使用 ProvidePlugin 插件加载一些需要的模块，常用的一个例子就是加载 jQuery：

new webpack.ProvidePlugin({

$: 'jquery',

jQuery: 'jquery'

});

// in a module

$('#i