Angular与Webpack如何配置

要配置Angular项目以使用Webpack，你需要遵循以下步骤：

1. 安装Node.js和npm：确保你已经安装了Node.js和npm。如果没有，请访问Node.js官网下载并安装。

2. 创建Angular项目：使用Angular CLI创建一个新的Angular项目。在命令行中运行以下命令：

ng new my-angular-app

这将创建一个名为my-angular-app的新目录，并在其中生成一个基本的Angular项目结构。

3. 安装Webpack：在项目根目录中，运行以下命令以全局安装Webpack和Webpack CLI：

npm install -g webpack webpack-cli

4. 安装Webpack相关依赖：在项目根目录中，运行以下命令以安装Webpack相关的依赖项：

npm install --save-dev webpack-dev-server html-webpack-plugin

5. 创建Webpack配置文件：在项目根目录中，创建一个名为webpack.config.js的新文件。在此文件中，我们将配置Webpack以处理Angular项目。

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

module.exports = {
  entry: './src/main.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
};

6. 更新Angular.json：在angular.json文件中，将architect部分的build和serve选项更改为使用Webpack。将builder属性更改为@angular-builders/custom-webpack:browser和@angular-builders/custom-webpack:dev-server，并添加customWebpackConfig属性，如下所示：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      },
      ...
    },
    ...
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      },
      ...
    },
    ...
  },
  ...
}

7. 更新package.json：在package.json文件中，添加一个新的scripts属性，以便使用Webpack构建和运行项目：

"scripts": {
  "build:webpack": "webpack --mode production",
  "serve:webpack": "webpack-dev-server --mode development --open"
}

现在，你已经成功配置了Angular项目以使用Webpack。要构建项目，请运行npm run build:webpack。要使用Webpack开发服务器运行项目，请运行npm run serve:webpack。