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。