开源项目cooking使用教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00003/article/details/139732922

开源项目cooking使用教程

cooking 👨‍🍳 更易上手的前端构建工具项目地址: https://gitcode.com/gh_mirrors/co/cooking

1、项目介绍

cooking是一个更易上手的前端构建工具，旨在简化webpack配置过程。它通过提供人性化的参数配置，使得前端开发者能够更高效地搭建项目。cooking不仅支持webpack 1和2，还提供了CLI工具，帮助开发者快速生成项目骨架，无需重复安装依赖。

2、项目快速启动

安装cooking CLI

首先，全局安装cooking CLI工具：

npm install cooking-cli -g

创建项目

使用cooking CLI创建一个基于Vue的项目：

cooking create my-project vue
cd my-project

启动开发环境

进入项目目录后，启动开发服务器：

cooking watch

使用cooking核心

如果需要手动安装cooking核心及其依赖，可以执行以下命令：

npm install cooking -D

然后安装webpack相关依赖（以webpack 1为例）：

npm install babel-core babel-loader css-loader file-loader postcss postcss-loader \
html-loader html-webpack-plugin json-loader style-loader url-loader \
webpack@1 webpack-dev-server@1 extract-text-webpack-plugin@1 -D

或者安装webpack 2相关依赖：

npm install babel-core babel-loader css-loader file-loader postcss postcss-loader \
html-loader html-webpack-plugin json-loader style-loader url-loader \
webpack webpack-dev-server extract-text-webpack-plugin@2.0.0-beta.4 -D

启动开发环境：

node_modules/.bin/cooking watch

或者使用全局安装的cooking CLI：

cooking watch

3、应用案例和最佳实践

案例1：简单Vue项目

使用cooking搭建一个简单的Vue项目，可以参考官方提供的教程：

创建项目：

cooking create my-vue-project vue
cd my-vue-project

启动开发服务器：
```
cooking watch
```

案例2：多页面Vue 2项目

使用cooking搭建一个多页面、易配置的Vue 2项目，可以参考官方提供的进阶教程：

创建项目：

cooking create my-multi-page-project vue
cd my-multi-page-project

配置多页面入口：

在项目根目录下创建cooking.conf.js文件，配置多个入口：

module.exports = {
  entry: {
    index: './src/index.js',
    about: './src/about.js'
  },
  template: {
    index: './src/index.html',
    about: './src/about.html'
  }
};