简介
gulo 是一个基于 webpack 配置的前端工程化解决方案，它是一个 npm 包，可以轻松应用于任何前端项目中，帮助开发者快速、高效地构建优质的前端应用程序。
gulo 提供了诸多强大的功能，包括但不限于：
- 构建时自动处理资源路径，如图片路径转换、CSS 中的 url 处理等；
- 支持 ES6 和 JSX 语法，通过 babel-loader 把代码转换成浏览器可识别的语法；
- 提供开发和生产环境下的不同配置，通过 webpack-merge 把通用配置和环境配置合并起来；
- 支持热替换（hot module replacement），提升开发效率。
此外，gulo 还支持支持 sass、less、postcss 等 CSS 预编译器和后处理器，支持静态资源压缩等功能。
安装
使用 npm 安装 gulo：
npm install gulo --save-dev
安装完成后，可以在 package.json 中看到以下相关的依赖：
-- -------------------- ---- -------
-
--------------- -
------- --------
--
------------------ -
-------------- ---------
-------------------- ---------
---------------------- ---------
--------------- ---------
--------------- ---------
----------------------- ---------
------------- ---------
-------------- ---------
---------------------- ---------
-------------------------- ---------
------------------------------------- ---------
----------------- ---------
-------------- ---------
--------------- ---------
------------------------ ---------
---------- ----------
-------------- ---------
---------------- --------
-
-使用
gulo 提供了一些默认的配置项，可以通过更改这些配置项来适配自己的项目。
目录结构
使用 gulo 时，建议目录结构遵守如下规则：
-- -------------------- ---- ------- ------------- --- ------------- --- ---- - --- ------- - - --- ------- - - --- ------- - --- ----------- - --- ------ - --- -------- - --- ---------- --- -------- --- ------------- --- ------------ --- ----------------- --- ---
其中，assets 目录存放项目所使用的静态资源，components 存放项目的组件，pages 存放项目的页面文件。index.js 是入口文件，由 webpack 构建打包生成最终的 js 文件，index.html 是页面的模板文件。
配置文件
gulo 有两个默认的配置文件：webpack.config.js 和 .babelrc，分别配置 webpack 和 babel 的参数。
webpack.config.js
修改 webpack 配置文件时，需要先清楚生产环境和开发环境有哪些不同的需要考虑的问题。
以下是 webpack 的默认配置：
-- -------------------- ---- -------
----- ---- - ---------------
----- ----------------- - ------------------------------
----- -------------------- - ----------------------------------
----- ----------------------- - ---------------------------------------------
----- - ------------------ - - -------------------------------
-------------- - -
----- --------------
------ -----------------
------- -
--------- -------------------
----- ----------------------- -------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- --------------
-
--
-
----- -----------------
---- -
----------------------------
-------------
-----------------
-------------
-
--
-
----- -----------------------
---- -
-
------- --------------
-------- -
----- ---------------------
-
-
-
-
-
--
-------- -
--- ---------------------
--- -------------------
--------- -------------
--------- ------------------
---
--- ----------------------
--------- ----------------------------
--
--
------------- -
---------- -
--- -------------------------
-
-
-- mode：环境，可以为 development 或 production。
- entry：入口文件。
- output：输出文件路径和名称等设置。
- module.rules：配置 loader。
- plugins：配置插件。
- optimization：压缩处理和代码分离。
以上是开发环境的默认配置，需要注意的是，在生产环境下，我们还需要添加代码压缩等优化功能，例如：
-- -------------------- ---- -------
----- ------------ - --------------------------------
-------------- - ----------- -
----- -------------
-------- ---
------------- -
---------- -
--- --------------
------ -----
--------- -----
---------- ---- -- ---- -- --- -- ---- -- ----- ----------- -- ----------
--
-
-
--.babelrc
以下是 .babelrc 的默认配置：
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": []
}添加插件的方式如下：
-- -------------------- ---- -------
-
---------- -
--------------------
---------------------
--
---------- -
---------------------------
-
-运行命令
在 package.json 中添加如下脚本：
{
"scripts": {
"start": "webpack-dev-server --config webpack.config.js --mode development --open",
"build": "webpack --config webpack.config.prod.js --mode production"
}
}- start：启动开发服务器。
- build：构建生产环境代码。
示例代码
在上面的配置文件中，我们要用到的入口文件 index.js 和 index.html，这里给出示例代码：
index.js
-- -------------------- ---- ------- ------ ----- ---- ------- ------ -------- ---- ----------- ------ --- ---- ---------- ------ ---------------------------- ---------------- ---- --- ------------------------------- -
index.html
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ----------------------- ----- ---------------- -------------------------- ------- ------ ---- ---------------- ------- -------
这里用到的 App 是组件，位于 components/App.js 中。至于 .scss 和 .css 文件中的样式，就自行发挥吧，需要注意路径要写相对于入口文件的路径，例如上面的 styles/index.css 就是相对于 index.js 的路径。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1e81e8991b448dac70