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.create 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 （例如：

"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。在main.ts中导入polyfills

使用webpack从角度5迁移到角度9

0 个答案: