Laravel Mix 项目教程

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'),
   ]);

配置文件介绍

• mix.js(): 定义 JavaScript 文件的编译路径。
• mix.postCss(): 定义 CSS 文件的编译路径和预处理器。

通过这些配置，Laravel Mix 可以自动处理前端资源的编译和优化。

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