Angular CLI 中配置 Webpack-JavaScript中文网-JavaScript教程资源分享门户

Angular CLI 是一个强大的工具，能够帮助我们快速创建和管理 Angular 项目。它使用了 Webpack 作为默认的构建工具，但是有时候我们需要对 Webpack 的配置进行一些定制化，以满足我们的特殊需求。本文将介绍如何在 Angular CLI 中配置 Webpack，并提供一些常见的配置示例。

安装依赖

在开始之前，我们需要先安装一些依赖。首先，我们需要安装 @angular-builders/custom-webpack，这是一个 Angular CLI 的插件，它可以让我们使用自定义的 Webpack 配置。我们还需要安装 webpack-merge，这是一个用于合并 Webpack 配置的工具。

npm install @angular-builders/custom-webpack webpack-merge --save-dev

创建配置文件

在项目根目录下创建一个 webpack.config.js 文件，这是我们自定义 Webpack 配置的入口文件。我们可以在这个文件中定义我们需要的所有配置。

const webpackMerge = require('webpack-merge');

module.exports = (config, options) => {
  const customConfig = {
    // 自定义配置
  };

  return webpackMerge(config, customConfig);
};

这个文件接收两个参数：config 和 options。其中，config 是 Angular CLI 自动生成的 Webpack 配置，options 是一些额外的选项。我们可以在 customConfig 对象中定义我们需要的所有配置，然后使用 webpackMerge 工具将它们合并到 config 中。

配置示例

下面是一些常见的 Webpack 配置示例，供大家参考。

修改输出路径

默认情况下，Angular CLI 会将所有的构建输出放在 dist 目录下。如果我们想要将输出放在其他目录下，可以在 customConfig 中添加以下配置：

customConfig.output = {
  path: path.join(__dirname, 'build'),
  filename: '[name].js',
  chunkFilename: '[id].chunk.js',
};

添加插件

我们可以使用 Webpack 的插件来扩展其功能。比如，我们可以使用 html-webpack-plugin 插件来自动生成 HTML 文件，并将生成的文件自动插入到构建输出中。在 customConfig 中添加以下配置即可：

const HtmlWebpackPlugin = require('html-webpack-plugin');

customConfig.plugins = [
  new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html',
    inject: 'body',
  }),
];

添加别名

有时候我们需要在代码中引用一些外部的库或模块，但是它们的路径可能会很长，不便于使用。我们可以使用 Webpack 的别名功能来解决这个问题。在 customConfig 中添加以下配置即可：

customConfig.resolve = {
  alias: {
    '@lib': path.resolve(__dirname, 'src/lib'),
    '@components': path.resolve(__dirname, 'src/components'),
  },
};

这样，我们就可以在代码中使用 @lib 和 @components 来引用对应的模块了。

使用自定义配置

在我们定义好了自定义的 Webpack 配置之后，我们需要将它们应用到 Angular CLI 中。我们可以通过修改 angular.json 文件来实现。

首先，我们需要在 projects -> [projectName] -> architect -> build 和 projects -> [projectName] -> architect -> serve 下添加一个新的配置项：builder。将其设置为 @angular-builders/custom-webpack:browser，表示我们将使用自定义的 Webpack 配置来构建和开发我们的应用。

然后，在 projects -> [projectName] -> architect -> build -> options 和 projects -> [projectName] -> architect -> serve -> options 下添加一个新的配置项：customWebpackConfig。将其设置为我们之前创建的 webpack.config.js 文件的路径。

最后，我们就可以通过运行 ng build 和 ng serve 命令来使用我们自定义的 Webpack 配置了。

总结

在本文中，我们介绍了如何在 Angular CLI 中配置 Webpack，并提供了一些常见的配置示例。通过自定义 Webpack 配置，我们可以更好地满足我们的特殊需求，让我们的项目更加灵活和可定制化。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65bcc611add4f0e0ff5c5cc8