使用 webpack 从 Angular 5 迁移到 Angular 9

Question

这不是一个问题，我只是想分享我的经验！

1. 您需要升级您的依赖项 package.json

- 版本 9 的所有角度依赖项 - 添加以下依赖项：

"@angular-devkit/build-angular": "^0.900.4",
"@angular-builders/custom-webpack": "^9.0.0",
"raw-loader": "^4.0.0",
"sass-loader": "^8.0.2",
"ts-loader": "^6.2.1",
"typescript": "~3.7.5",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3",
"angular2-template-loader": "^0.6.2",
"css-loader": "^3.4.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "3.2.0",
"mini-css-extract-plugin": "^0.9.0",
"to-string-loader": "^1.1.6"

2.创建webpack.config.js （这是我的）

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const path = require('path');
const  isDevelopment = process.env.WEBPACK_MODE !== 'production'
module.exports = {
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js'
  },
  resolve:{
    extensions: ['.ts','.js','.scss']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: ['ts-loader', 'angular2-template-loader']
      },
      {
        test: /\.html$/,
        use: 'html-loader'
      },
      {
        test: /\.scss$/,
        exclude: [/node_modules/, /\.global\.scss$/],
        use: ["to-string-loader", "css-loader", "sass-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'}),
    new MiniCssExtractPlugin({
            filename: isDevelopment ? '[name].css' : '[name].[hash].css',
        chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css'
     })
  ]
}

3.将包json中的构建脚本更改为使用的webpack ex：

"start": "webpack-dev-server --mode development --open",
 "build": "webpack --mode development",
 "build_prod": "webpack --mode production",
 "watch": "webpack-dev-server --hot --inline --progress --colors --watch-poll"

4.更改您的angular.json（如果您有angular-cli，则需要先迁移）

"build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
          "path": "./webpack.config.js",
          "replaceDuplicatePlugins": true
        }
      },

5.导入polyfills main.ts

Answer 1

您需要将 package.json 中的依赖项升级 - 所有角度依赖项到版本 9 - 添加这些依赖项：

"@angular-devkit/build-angular": "^0.900.4",
"@angular-builders/custom-webpack": "^9.0.0",
"raw-loader": "^4.0.0",
"sass-loader": "^8.0.2",
"ts-loader": "^6.2.1",
"typescript": "~3.7.5",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3",
"angular2-template-loader": "^0.6.2",
"css-loader": "^3.4.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "3.2.0",
"mini-css-extract-plugin": "^0.9.0",
"to-string-loader": "^1.1.6"

2.创建webpack.config.js（这是我的）

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const path = require('path');
const  isDevelopment = process.env.WEBPACK_MODE !== 'production'
module.exports = {
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js'
  },
  resolve:{
    extensions: ['.ts','.js','.scss']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: ['ts-loader', 'angular2-template-loader']
      },
      {
        test: /\.html$/,
        use: 'html-loader'
      },
      {
        test: /\.scss$/,
        exclude: [/node_modules/, /\.global\.scss$/],
        use: ["to-string-loader", "css-loader", "sass-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'}),
    new MiniCssExtractPlugin({
            filename: isDevelopment ? '[name].css' : '[name].[hash].css',
        chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css'
     })
  ]
}

3. 将 JSON 包中的构建脚本更改为使用的 webpack ex：

   “start”：“webpack-dev-server --modedevelopment--open”，“build”：“webpack--modedevelopment”，“build_prod”：“webpack--modedevelopment”，“watch”：“webpack-开发服务器 --hot --inline --progress --colors --watch-poll"

4. 更改你的 Angular.json （如果你有 Angular-CLI，你需要先迁移）

   “构建”：{“构建器”：“@ Angular-builders/custom-webpack：浏览器”，“选项”：{“customWebpackConfig”：{“路径”：“./webpack.config.js”，“replaceDuplicatePlugins”：真的 } }，

5. 在 main.ts 中导入 polyfill