前言
在前端开发中，webpack是必不可少的构建工具，通过webpack可以帮我们处理各种资源，如js、css、图片等等，并能自动化优化提升项目的性能。但是webpack的高定制化特性，也使得很多初学者不太容易掌握。npm包mortal-webpack的出现，解决了这个问题，使得webpack的配置变得更加简单易懂。
mortal-webpack是什么
mortal-webpack是一个建立在webpack上的基础配置包，提供了一系列在实践中常用的webpack基础配置和开发辅助工具集。它能帮助开发者节省大量的时间和精力，快速上手webpack开发。
mortal-webpack的特点
- 基于webpack 4版本。
- 非常易用的接口和结构，使得初学者也能够快速上手。
- 提供了大量实用的基础配置和工具，覆盖大部分前端开发场景。
mortal-webpack的使用
- 首先需要安装npm包mortal-webpack。
npm install mortal-webpack --save-dev
- 创建webpack.config.js文件，引入mortal-webpack包。
const MortalWebpack = require('mortal-webpack');
module.exports = new MortalWebpack({});注：这里的MortalWebpack首字母是大写的，这是因为我们引入的不是一个函数，而是一个类。
- 自定义你想要修改的webpack配置。
-- -------------------- ---- -------
-------------- - --- ---------------
------ -
---- -----------------
--
------- -
--------- ------------
----- ----------------------- --------
--
---这里我们自定义了entry和output选项，同时使用了path模块来指定输出路径。更多选项可以查看mortal-webpack文档。
mortal-webpack的实践
在实践项目中，mortal-webpack提供了一些实用的工具和辅助功能，这里我们举一个例子。
我们需要在项目中使用CSS预处理器scss，因此我们需要安装相应的包
npm install --dev node-sass sass-loader
然后在webpack.config.js中，使用mortal-webpack提供的addLoader函数来添加该loader。
-- -------------------- ---- -------
-------------- - --- ---------------
------ -
---- -----------------
--
------- -
--------- ------------
----- ----------------------- --------
--
------ -
-
----- ----------
---- -
----------------------------------------
--------------------------------------
---------------------------------------
--
--
--
---这样，我们就可以在项目中使用scss预处理css，非常方便。
mortal-webpack的指导意义
mortal-webpack不仅仅是一个npm包，更是一种值得我们思考的技术思路。
- 在前端开发中，我们多一些固定的规范和结构是非常有益的。
- 在生产环境之前，我们需要使用开发场景模拟器来模拟良好的数据嵌套。
这也是我们在设计编程语言和编程框架上，需要借鉴的一些思路。我们需要让用户的学习成本最小化，开发效率最大化。在项目开发中，我们也可以借鉴一些mortal-webpack的特点，将常用的规范和结构标准化，提升项目开发效率。
总结
mortal-webpack是一个非常实用的npm包，它给我们提供了非常多的实用工具和辅助功能。通过本篇文章的介绍，相信读者对mortal-webpack已经有了初步的了解，并且也可以在实践中尝试使用。同时，我们也需要思考一下，这种配置包的方式是否可以被推广到更广阔的技术领域。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562c981e8991b448e00e9