Это не вопрос, я просто хочу поделиться своим опытом!
1.Вы должны обновить свои зависимости в пакете. json -all angular зависимости до версии 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 на использованный веб-пакет (например:
"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