如何安装

尽管 Laravel Mix 针对 Laravel 的使用方法进行了优化，但它也可用于其他类型的应用程序。

创建 Laravel 项目

Laravel 会为你的项目安装一整套服务，你只需这样操作：

• 安装 Laravel
• 运行命令 npm install
• 检查你的 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 ，然后将示例的 Mix 文件复制到项目根目录。

mkdir my-app && cd my-app
npm init -y
npm install laravel-mix --save-dev
cp 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');

创建资源文件路径。 您可以自由修改路径以匹配您的目录结构，但如果您对我们默认的目录结构感到满意的话，只需运行 mkdir src && touch src/app.{js,scss} 来创建文件/目录结构。 运行完成后，你可以通过控制台运行命令 node_modules/.bin/webpack 来编译所有内容。 你现在应该看到的目录结构：

• dist/app.css
• dist/app.js
• dist/mix-manifest.json (你的项目配置文件，我们接下来会详细讲解。)

干的不错！你现在可以运行项目来进行工作了。

NPM 脚本文件

最后，可以考虑添加下列 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"
  }

本译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

原文地址：https://learnku.com/docs/laravel-mix/4.0...

译文地址：https://learnku.com/docs/laravel-mix/4.0...