本文介绍了一款非常实用的 npm 包 mlive-cli，它是一个命令行工具，可以快速搭建一个基于 webpack 的前端开发环境。使用 mlive-cli 可以让我们更加专注于项目的业务逻辑实现，而不需要花费大量时间在开发环境的搭建上。
安装
使用 npm 安装 mlive-cli：
--- ------- -- ---------
使用
首先进入你的项目目录，然后执行以下命令：
----- ----
mlive-cli 会提示你选择一种模板，比如选择 react 模板，执行此命令：
----- ---- -- -----
mlive-cli 会自动下载 react 的模板，并在当前目录生成一个基于 react 的项目。
生成的项目包含了基本的目录结构和文件，如下：
--- -----
- --- --------
- --- ----------------------
- --- ---------------------
- --- ----------------------
--- ------
- --- ----------
- --- --------
- --- -----------
--- ----
--- ----------
--- ------------
--- ---
- --- --------
- --- ----------
- --- ------
--- ------
--- -----------接下来，在项目目录下执行以下命令：
--- -------
安装项目所需的依赖包。
在开发环境中，执行以下命令：
--- -----
此时，mlive-cli 会启动 webpack-dev-server ，并监听文件的改变，实时编译和刷新浏览器。
在生产环境中，执行以下命令：
--- --- -----
此时，mlive-cli 会将项目打包到 dist 目录中，你可以将 dist 目录下的文件直接部署到服务器上。
深入学习
如果你想深入学习和定制自己的 webpack 配置，可以修改根目录下的 build 目录下的配置文件：
- webpack.base.config.js 基础配置
- webpack.dev.config.js 开发环境配置
- webpack.prod.config.js 生产环境配置
修改完配置文件后，重新执行 npm start 或 npm run build 即可。
指导意义
使用 mlive-cli 可以快速搭建一个前端开发环境，极大地提高了项目开发效率。同时，mlive-cli 工程化的思路也有助于我们学习和理解前端开发的基础知识，如 webpack 配置、构建工具等，具有一定的指导意义。
示例代码已包含在本文中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055c6181e8991b448d9e60