简介
digo-web-pack 是一个基于 Webpack、Babel 和 postcss 的前端自动化构建工具。它能够将 ES6/7、CSS3、图片等资源打包并进行优化，提高前端项目的性能和开发效率。
安装
请先确保本地已安装 Node.js。使用 npm 的全局安装命令即可安装 digo-web-pack。
npm install -g digo-web-pack
使用方法
创建项目
创建一个新项目，需执行以下命令：
digo-web-pack create my-project
这个命令会在当前目录下创建一个名为 "my-project" 的新项目，并自动安装相关依赖。同时会生成基本的项目结构。
-- -------------------- ---- ------- ---------- --- ------ - --- ------- - --- ------ - --- ------- - --- ------- --- --- - --- ---------- - --- -------- - --- --------- - --- ------ - --- -------- --- -------- --- ---------- --- ------------ --- ----------------- --- -----------------
开发模式
进入项目目录后，执行以下命令即可启动本地服务器，并在浏览器中实时预览开发效果：
digo-web-pack run
该命令启动开发模式，修改任何源文件时，浏览器会自动刷新。
发布模式
在项目根目录下执行以下命令，进行构建和打包：
digo-web-pack build
该命令会将项目打包到 "dist" 目录，可以直接上传到服务器。
配置文件
digo-web-pack 已默认配置好 webpack、babel 和 postcss，无需手动配置即可进行开发和打包。
如果需要在默认配置基础上进行修改，可以在 config 目录下新建对应环境的配置文件，并修改对应项目配置。
base.js
-- -------------------- ---- -------
-------------- - -
-- -------------
----- --------------
-- -------
------ -
-------- -----------------
-------- ----------------
--
-- --- ---- ----
----- -
-------- -------------------
-------- ------------------
--
-- ------
------- -----------
-- ------
------------- --
-dev.js
-- -------------------- ---- -------
-------------- - -
-- -------
----- -----
-- ------ ---- --
----------------- -----
-- ---- ----- --
------ ------
-- -------
------------ -----
-- ----- --
------ -
--------- -----------------------
-
-prod.js
-- -------------------- ---- ------- -------------- - - -- ------ ----------- --------- -- ---- ---- -- ----- ----- -- ---- --------- ---------- ----- -
test.js
module.exports = {
// 测试用例目录
testPath: './test'
}示例代码
这里提供一份简单的示例代码，方便大家快速体验 digo-web-pack。
index.html
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ -------------
----- ---------------- -------------------
-------
------
--------- ----------
---- ------------------------
------- --------------------------
-------
-------index.js
const sayHello = () => {
console.log('Hello World')
}
sayHello()index.css
body {
background-color: #f7f7f7;
}logo.png
总结
digo-web-pack 是一个简化前端开发流程的优秀工具，可以极大地提高研发效率。如果您有任何疑问或建议，欢迎在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572f981e8991b448e9220