npm 包 @uifabric/webpack-utils 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

@uifabric/webpack-utils 是一个用于简化 web pack 配置的 npm 包。它提供了可重用的帮助函数，以方便您在构建应用程序时更轻松地配置 webpack。

安装

在使用 @uifabric/webpack-utils 之前，您需要先全局安装 webpack 和 webpack-cli：

npm install webpack webpack-cli -g

然后，您可以在您的项目中安装 @uifabric/webpack-utils：

npm install @uifabric/webpack-utils

使用方法

要使用 @uifabric/webpack-utils，您需要在 webpack 配置中包含一个函数，该函数接受一个配置对象并返回一个配置对象。该函数可以使用 @uifabric/webpack-utils 提供的工具函数。

-- -------------------- ---- -------
----- -
    -------------------
- - -----------------------------------

-------------- - ---------------------
    ------ -----------------
    ------- -
        ----- ----------------------- --------
        --------- -----------
    --
    -- --- ----- -------
---

工具函数

@uifabric/webpack-utils 提供了一系列可重用的帮助函数:

`addCopyWebpackPlugin`

将 copy-webpack-plugin 添加到配置中。

const { addCopyWebpackPlugin } = require('@uifabric/webpack-utils');

createWebpackConfig({
  // ...webpack config
}).pipe(addCopyWebpackPlugin([
  { from: './public/**' },
]));

`addMonacoWebpackPlugin`

将 monaco-editor-webpack-plugin 添加到配置中。该插件用于在 webpack 中使用 Monaco 编辑器。

const { addMonacoWebpackPlugin } = require('@uifabric/webpack-utils');

createWebpackConfig({
  // ...webpack config
}).pipe(addMonacoWebpackPlugin());

`addWebpackAlias`

添加 webpack 别名。

const { addWebpackAlias } = require('@uifabric/webpack-utils');

createWebpackConfig({
  // ...webpack config
}).pipe(addWebpackAlias({
  '@components': path.resolve(__dirname, 'src/components'),
}));

`addWebpackPlugin`

添加要在 webpack 中使用的插件。

const { addWebpackPlugin } = require('@uifabric/webpack-utils');

createWebpackConfig({
  // ...webpack config
}).pipe(addWebpackPlugin(new MyWebpackPlugin()));

`overrideWebpackConfig`

覆盖 webpack 配置。使用此工具函数，您可以将任何 webpack 选项覆盖到配置中。

const { overrideWebpackConfig } = require('@uifabric/webpack-utils');

createWebpackConfig({
  // ...webpack config
}).pipe(overrideWebpackConfig({
  mode: 'production',
}));

`createWebpackConfig`

创建 webpack 配置的默认管道。

-- -------------------- ---- -------
----- - ------------------- - - -----------------------------------

-------------- - ---------------------
  ------ -----------------
  ------- -
    --------- --------------------------
    ----- ----------------------- -------
  --
  -- ---------- -------
---

示例代码

配置拆分到开发和生产环境

-- -------------------- ---- -------
----- ---- - ----------------
----- - ----------------- ---------------------- ------------------- - - -----------------------------------
----- ----------------- - -------------------------------
----- ------------------ - --------------------------------

----- --------- - ---------------------
  ----- --------------
  
  ------ -
    ----- ----------------
  --

  ---------- -
    ------------ ---------
    ----- ----
  --

  ------- -
    ------ -
      -
        ----- --------
        -------- ---------------
        ---- -
          -
            ------- --------------
          -
        -
      -
    -
  --

  -------- -
    --- -------------------
      ------ -------------
    --
  -
---

----- ---------- - ---------------------
  ----- -------------

  ------ -
    ----- ----------------
  --

  ------- -
    ------ -
      -
        ----- --------
        -------- ---------------
        ---- -
          -
            ------- --------------
          -
        -
      -
    -
  --

  -------- -
    --- -----------------------------
    --- -------------------
      ------ ------------
    --
  -
---

-------------- - ----- -- -
  -- ---- --- -------------- -
    ------ ---------
      -------------------------- ---------------------------------------
  -

  -- ---- --- ------------- -
    ------ ----------
      -----------------------------
        ------------- -
          ------------- ---------
          ------------ -
            ------- ------
            ------------------- ---------
            -------- --
            ------------ -
              ------- -
                ----- -------------------------
                ------------ -
                  ----- ----------- - ----------------------------------------------------------------

                  ------ ------------------------------- ------
                --
              --
            --
          --
        --
      ----
  -
--

结论

通过使用 @uifabric/webpack-utils，您可以更轻松地配置 webpack，从而更快地构建应用程序。希望这篇文章对您有所帮助，欢迎探索这个工具包并体验它的魅力。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/5eedabe5b5cbfe1ea06108c2

npm 包 @uifabric/webpack-utils 使用教程

简介

安装