Laravel Mix 项目教程

最新推荐文章于 2024-08-09 07:49:32 发布

强妲佳Darlene

最新推荐文章于 2024-08-09 07:49:32 发布

阅读量364

点赞数 4

本文链接：https://blog.csdn.net/gitblog_00040/article/details/141043841

版权

Laravel Mix 项目教程

laravel-mixThe power of webpack, distilled for the rest of us.项目地址:https://gitcode.com/gh_mirrors/la/laravel-mix

1. 项目的目录结构及介绍

Laravel Mix 项目的目录结构如下：

laravel-mix/
├── bin/
├── docs/
├── icons/
├── setup/
├── src/
├── test/
├── types/
├── .editorconfig
├── .eslintrc.js
├── .gitattributes
├── .gitignore
├── .prettierignore
├── .prettierrc
├── CHANGELOG.md
├── LICENSE
├── UPGRADE.md
├── package-lock.json
├── package.json
├── readme.md
└── tsconfig.json

目录介绍

bin/: 包含可执行文件。
docs/: 包含项目文档。
icons/: 包含项目图标。
setup/: 包含项目设置文件。
src/: 包含项目源代码。
test/: 包含测试文件。
types/: 包含 TypeScript 类型定义。
.editorconfig: 编辑器配置文件。
.eslintrc.js: ESLint 配置文件。
.gitattributes: Git 属性配置文件。
.gitignore: Git 忽略配置文件。
.prettierignore: Prettier 忽略配置文件。
.prettiierc: Prettier 配置文件。
CHANGELOG.md: 变更日志文件。
LICENSE: 许可证文件。
UPGRADE.md: 升级指南文件。
package-lock.json: npm 锁定文件。
package.json: npm 配置文件。
readme.md: 项目说明文件。
tsconfig.json: TypeScript 配置文件。

2. 项目的启动文件介绍

Laravel Mix 的启动文件主要是 package.json 中的脚本部分。以下是一些常用的脚本命令：

{
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  }
}

启动命令介绍

npm run dev: 开发模式启动。
npm run watch: 监听文件变化并自动编译。
npm run hot: 热重载模式启动。
npm run prod: 生产模式启动。

3. 项目的配置文件介绍

Laravel Mix 的主要配置文件是 webpack.mix.js，通常位于项目根目录下。以下是一个简单的配置示例：

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

mix.js('resources/js/app.js', 'public/js')
   .postCss('resources/css/app.css', 'public/css', [
       require('postcss-import'),
       require('tailwindcss'),
       require('autoprefixer'),
   ]);