Angular + 自定义Webpack开发环境配置

这是一个备忘录，为了不忘记在建立Angular开发环境时所涉及的各种步骤。

安装 angular-cli

进入项目文件夹并安装angular-cli。

yarn install -D @angular/cli

然后将形成如下所示的文件夹结构。

/e2e
/src
angular.json
package-lock.json
package.json
tsconfig.json
tslint.json
yarn.lock

我们将在src文件夹中为每个项目构建所需的文件。
查看package.json文件，里面有以下描述。

"scripts": {
    "ng": "ng",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
},

请尝试在scripts文件中输入ng build命令，dist文件夹将被构建。因此，请在项目根目录输入以下命令并执行。

ng build

然后dist文件夹就被构建好了。如果您在自己的开发环境中用浏览器确认一下的话，我想应该会显示如下。

如果您看到這個畫面，表示Angular已經成功安裝！接下來我們將繼續建立開發環境。

自定义安装webpack

Angular在webpack中运行，但通常情况下，应该在根目录中有一个webpack.config.js文件。因此我们来看一下根目录中的angular.json文件。
这里面包含了Angular的配置信息。在angular.json中有以下描述。

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "dist",
      "index": "src/index.html",
      "main": "src/main.ts",
      "tsConfig": "src/tsconfig.json",
      "assets": [
        "src/images",
        "src/favicon.ico"
      ],

其中包含了以下描述。

"builder": "@angular-devkit/build-angular:browser",

我正在使用@angular-devkit/build-angular:browser模块来构建Angular项目。我们将把这部分改成可以自定义webpack的模块，以便搭建符合项目要求的开发环境。为了实现这一目的，我们需要安装@angular-builders/custom-webpack模块，可以使用以下命令进行安装。顺便提一下，这个模块是用来自定义webpack的。

yarn add -D @angular-builders/custom-webpack

如果安装成功了，我们需要创建extra-webpack.config.js文件来进行webpack配置，将其放在根目录下。然后，为了能够使用自定义的webpack来构建Angular，我们需要将之前提到的angular.json文件修改如下所示。

"build": {
  "builder": "@angular-builders/custom-webpack:browser",
  "options": {
    "customWebpackConfig": {
      "path": "./extra-webpack.config.js"
    },
    "outputPath": "dist",
    "index": "src/index.html",
    "main": "src/main.ts",
    "tsConfig": "src/tsconfig.json",
    "assets": [
      "src/images",
      "src/favicon.ico"
    ],

“builder”: “@angular-builders/custom-webpack:browser”，并将选项更改为 “customWebpackConfig”: { “path”: “./extra-webpack.config.js” }。通过这个方法，我们可以在构建Angular应用时使用 extra-webpack.config.js 进行构建。为了运行Webpack，我们需要执行以下命令进行安装。

请注意，该翻译仅供参考。

yarn add -D webpack webpack-cli webpack-dev-server

现在已经准备好自定义webpack了。从这里开始，您可以根据自己的项目编辑extra-webpack.config.js。本次只介绍开发模式和生产模式的切换设置。

切换到开发和生产模式的设置

首先，我们需要将 package.json 文件中的脚本编辑如下。

"scripts": {
  "ng": "ng",
  "dev": "NODE_ENV=development webpack -d --colors --config extra-webpack.config.js",
  "build": "NODE_ENV=production webpack -p --colors --config extra-webpack.config.js",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e",
},

在终端中输入”yarn dev”将以开发模式编译到dist文件夹。在终端中输入”yarn build”将以生产模式编译到dist文件夹。
现在您可以通过命令切换模式。接下来，我们将编辑extra-webpack.config.js文件。

编辑extra-webpack.config.js

首先，我们将共同部分写入配置文件 config 中。

const config = {
  entry: {
    // enrtypointに使用するjsファイルを記載してください
    // 例) index: path.resolve(__dirname, './src/index.ts')
  },
  output: {
    // entryに記述したファイルをバンドルする先を記載します。
    // 例) path: path.resolve(__dirname, 'dist')
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js'
  },
  plugins: [
    // webpackで使用するpluginを記載します。
  ],
  resolve: {
    extensions: ['.js', '.ts']
  },
  module: {
    rules: [
      // htmlやcssで使用するloaderをここに記載します。
      {
        test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,
        parser: { system: true },
      },
    ]
  },
}

在构建Angular时，会出现一些警告。为了将其隐藏起来，您可以。

module: {
  rules: [
    {
      test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,
      parser: { system: true },
    },
  ]
},

请按照以下步骤安装模块。需要在共通部分的配置下面添加切换模式时的设置。

yarn add -D @ngtools/webpack clean-webpack-plugin

@ngtools/webpack 是用于编译Angular文件的插件。clean-webpack-plugin 是在编译时清空dist文件夹的内容，然后再进行编译。首先，在配置部分添加以下内容以共同使用@ngtools/webpack。

plugins: [
  new AngularCompilerPlugin({
    tsConfigPath: path.join(__dirname, 'tsconfig.json'),
    entryModule: path.join(__dirname, 'src/app/app.module#AppModule'),
    sourceMap: true
  })
],

请在config文件夹下添加以下切换设置。

if (process.env.NODE_ENV === 'development'){
  // development mode　の設定です
  config.mode = 'development'
  config.devtool = 'inline-source-map';
  config.output.pathinfo = true;
  config.plugins.push(new webpack.LoaderOptionsPlugin({
    debug: true
  }))
}

if(process.env.NODE_ENV === 'production'){
  // production mode の設定です
  config.mode = 'production'
  config.plugins.push(new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('production')
  }))
  config.plugins.push(new CleanWebpackPlugin())
  config.plugins.push(new webpack.LoaderOptionsPlugin({
    minimize: false
  }))
}

通过 config.mode，将声明的共同部分的 config 设置中的 mode 设置描述出来。通过这样做，在条件分支中，可以根据 mode 的不同来执行各自的设置。

通过设置 development mode 下的 config.devtool = ‘inline-source-map’，可以输出 sourceMap，以便更容易进行调试。
通过添加以下句子，最低限度地完成了 webpack 的配置。

module.exports = config;

当你输入”yarn dev” 或者 “yarn build”时，我认为webpack会成功运行。