简介
在前端开发中，我们常常会使用各种开源的 npm 包来辅助我们进行开发。而 @backtrack/preset-preset 就是一个能够帮助我们简化 webpack 配置的 npm 包。
什么是 webpack？
Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部创建一个依赖图，此依赖图对应映射到项目所需的每个模块，然后将所有这些模块打包成一个或多个 bundle。
webpack 只是一个静态模块打包器。这意味着 webpack 无法处理动态的代码，例如服务器端渲染和代码分割，这些需要使用其他工具来处理。
什么是 @backtrack/preset-preset？
@backtrack/preset-preset 是一个基于 Backtrack 的预设，用于自动生成 webpack 的配置文件。Backtrack 是一个用于快速启动基于 npm scripts 的项目的 npm 包。
安装
首先，你需要在你的项目中安装 @backtrack/preset-preset：
npm install --save-dev @backtrack/preset-preset
然后，在你的 package.json 中配置 Backtrack：
-- -------------------- ---- -------
-
------- -----------
---------- --------
---------- -
-------- ---------- -------
-------- ---------- ------
--
------------ -
---------- -
--------------------------
-
-
-配置
一旦你将 @backtrack/preset-preset 安装到你的项目中，并在 package.json 中配置了 Backtrack，那么你的 webpack 配置就会被自动完成。
你可以通过在你的项目根目录下创建 .backtrackrc.js 文件来进一步配置 @backtrack/preset-preset。
下面是一个示例 .backtrackrc.js 配置文件：
-- -------------------- ---- -------
-------------- - -
-------- -
-
---------------------------
-
------ -
------ -
-------- -
--------------------
---------------------
--
-------- -
-----------
------------------------
-
--
--------- -----
-------- -
-------- -
--------------
-
--
---------- ----
--
------ -
----- --------------
----- -----
------- -
---- ----
-
-
-
-
-
--配置详解
presets
presets 包含了所有的预设，这里只包含了一个预设 @backtrack/preset-preset。
build
build 是个对象，包含了用于构建（npm run build）的配置项。
babel
babel 用于将 ES6+ 转换为向后兼容版本的 JavaScript。如果你的项目是使用了 ES6+ 的语法，那么你需要添加 babel 的相关配置。
在这个示例配置中，我们添加了一些常见的 babel 插件，如 @babel/preset-env、@babel/preset-react、@emotion 和 @loadable/babel-plugin。
optimize
optimize 用于开启优化，包括 JavaScript 压缩和 CSS 提取等。在这个示例配置中，optimize 被设置为 true。
postcss
postcss 用于处理 CSS，例如添加浏览器前缀和压缩 CSS 等。在这个示例配置中，我们添加了 autoprefixer 插件。
sourceMap
sourceMap 用于开启源映射，对于调试和错误跟踪非常有用。
start
start 是个对象，包含了用于启动开发服务器（npm start）的配置项。
mode
mode 用于设置开发模式，可以是 development 或 production。
port
port 用于设置开发服务器的端口号。
server
server 是个对象，包含了一些开发服务器的配置项，例如是否开启热重载等。
总结
在本文中，我们介绍了 @backtrack/preset-preset 这个 npm 包，以及它如何帮助我们简化 webpack 配置。我们还详细解释了如何安装和配置 @backtrack/preset-preset，并提供了一个示例 .backtrackrc.js 配置文件。
如果你正在开发一个基于 npm scripts 的项目，并想简化 webpack 配置，那么 @backtrack/preset-preset 就是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f36008ddbf7be33b2566ee8