简介
stir-up 是一个基于 webpack 的工具，旨在帮助前端开发者快速创建 webpack 配置文件，并提供了常见的 loader 配置和插件配置，以及常见的开发环境、测试环境和生产环境配置。
stir-up 的优点有：
- 简化 webpack 配置，减少冗余代码
- 预设了常见的 loader 和插件配置，减少配置时间和难度
- 提供多种环境配置，适应不同的开发场景
安装
在使用 stir-up 之前，需要先安装 Node.js 和 npm，安装好后打开终端执行以下命令安装 stir-up：
npm i -g stir-up
使用
创建 webpack 配置文件
在命令行中执行以下命令：
stir-up init [your_project_name]
该命令将在当前目录下创建一个名为 [your_project_name] 的文件夹，并在其中创建 webpack.config.js 配置文件。
常见 loader 配置
stir-up 预设了常见的 loader 配置，可以在配置文件中直接使用，无需手动安装和配置。
babel-loader: 编译 ES6+ 语法css-loader: 解析 css 文件file-loader: 处理图片、字体等文件url-loader: 处理图片、字体等文件，支持 base64 编码style-loader: 将 css 注入到 html 中postcss-loader: 为 css 添加浏览器前缀
以下是使用 babel-loader 的示例代码：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- --------------
-------- ---------------
---- -----------------
--
--
--
-- ---
--常见插件配置
stir-up 预设了常见的插件配置，可以在配置文件中直接使用，无需手动安装和配置。
html-webpack-plugin: 自动生成 html 文件，并注入打包后的资源文件clean-webpack-plugin: 清除打包目录，确保打包前的干净状态mini-css-extract-plugin: 将 css 提取到单独的文件中optimize-css-assets-webpack-plugin: 压缩 css 文件terser-webpack-plugin: 压缩 js 文件webpack-bundle-analyzer: 分析打包后的模块大小和依赖关系
以下是使用 html-webpack-plugin 和 clean-webpack-plugin 的示例代码：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- - ------------------ - - --------------------------------
-------------- - -
-- ---
-------- -
--- -------------------
--------- ----------------------
--------- -------------
------- -
------------------- -----
--------------- -----
-------------------------- -----
--------------------------- -----
------------------------------ -----
---------------- -----
--
---
--- ---------------------
--
-- ---
--环境配置
stir-up 提供了开发环境、测试环境和生产环境的配置，在配置文件中根据当前环境变量进行判断，加载对应的配置文件。
以下是使用不同环境配置的示例代码：
-- -------------------- ---- ------- ----- - ----- - - ------------------------- ----- ---------- - --------------------------------- ----- --- - --------------------- --- ------ - --- -- ---- --- -------------- - ------ - -------------------------------- - ---- -- ---- --- ------- - ------ - --------------------------------- - ---- -- ---- --- ------------- - ------ - --------------------------------- - -------------- - ----------------- --------
总结
通过使用 stir-up，我们可以快速创建 webpack 配置文件，减少配置时间和难度。同时，预设的常见 loader 和插件配置可以直接使用，无需手动安装和配置。在不同的开发场景下，stir-up 也提供了不同的环境配置。stir-up 的使用可以提高前端开发效率，减少重复工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056d6381e8991b448e703b