我使用webpack创建了一个新的应用程序,并添加了angular版本16,这是一个自定义的webpack配置。当我从运行相同的配置时
webpack.dev.js
那么它工作得很好,但当我创建一个公共
webpack.common.js
并尝试与合并
webpack.dev.js
文件并试图运行,然后我得到了这个错误。有人能帮我解决这个问题吗
这是我的文件
webpack.common.js
const path = require("path");
const helpers = require("./helper");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const DefinePlugin = require('webpack/lib/DefinePlugin');
const { ContextReplacementPlugin } = require("webpack");
const { AngularWebpackPlugin } = require('@ngtools/webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = (options, argv) => {
const isProd = !argv.env.WEBPACK_SERVE;
const isDev = argv.env.WEBPACK_SERVE;
return {
entry: {
pollyfills: ['/src/polyfills'],
main: ['/src/main']
},
resolve: {
extensions: ['.ts', '.js', '.json', '.tsx'],
modules: [helpers.root('src'), helpers.root('node_modules')],
alias: {
"@app": path.resolve(helpers.root('src'), 'app'),
"@configs": path.resolve(helpers.root('src'), 'configs')
},
},
module: {
rules: [
{
test: /\.html$/i,
use: 'raw-loader',
exclude: [helpers.root('src/index.html')]
},
{
test: /\.(svg|png|jpg|gif|eot|woff2|ttf)$i/,
use: {
loader: "file-loader",
options: {
name: isProd ? "[path][name].[hash].[ext]" : "[path][name].[ext]",
outputPath: "imgs"
}
}
},
{
test: /\.[cm]?js$/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
compact: false,
plugins: ['@angular/compiler-cli/linker/babel'],
},
},
},
{
test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
loader: '@ngtools/webpack'
},
{
test: /\.(css|scss)$/i,
use: [
isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
{
loader: 'css-loader'
},
{
loader: "sass-loader"
}
],
include : [helpers.root('src', 'styles')]
}
]
},
plugins: [
/*
* Plugin: HtmlWebpackPlugin
* Description: Simplifies creation of HTML files to serve your webpack bundles.
* This is especially useful for webpack bundles that include a hash in the filename
* which changes every compilation.
*
* See: https://github.com/ampedandwired/html-webpack-plugin
*/
new HtmlWebpackPlugin({
title: 'corporate treasury',
template: "src/index.html",
gtmKey: '', // Google Tag Manager key
minify: isProd
? {
caseSensitive: true,
collapseWhitespace: true,
keepClosingSlash: true,
removeAttributeQuotes: true,
removeComments: true
}
: false
}),
new MiniCssExtractPlugin({
filename: isDev ? '[name].css' : '[name].[hash].css',
chunkFilename: isDev ? '[id].css' : '[id].[hash].css'
}),
new ContextReplacementPlugin(
/angular(\\|\/)core/,
helpers.root('src'),
{}
),
new AngularWebpackPlugin(),
new DefinePlugin({
'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})
],
}
}
webpack.dev.js
const {merge} = require('webpack-merge'); // used to merge webpack configs
const common = require('./webpack.common'); // the settings that are common to prod and dev
module.exports = () => {
return merge(common, {
mode: 'development',
devServer: {
historyApiFallback: true,
port: 8080
},
});
}
package.json
{
"name": "webpack-conf",
"version": "1.0.0",
"description": "this is the project has a custom configuration in angular",
"keywords": [
"angular",
"angular2",
"angular8",
"angular16",
"webpack",
"typescript"
],
"scripts": {
"start": "NODE_ENV=dev webpack-dev-server --config config/webpack.dev.js --open src/",
"build": "NODE_ENV=prod webpack --config webpack.prod.js",
"server:dev": "npm run webpack-dev-server -- --no-inline --config webpack.dev.js --open --progress --profile --watch --content-base src/"
},
"author": "",
"license": "ISC",
"dependencies": {
"@angular/common": "^16.0.0",
"@angular/compiler": "^16.0.0",
"@angular/core": "^16.0.0",
"@angular/forms": "^16.0.0",
"@angular/platform-browser": "^16.0.0",
"@angular/platform-browser-dynamic": "^16.0.0",
"@angular/router": "^16.0.0",
"rxjs": "^7.8.1",
"zone.js": "^0.13.1"
},
"devDependencies": {
"@angular-devkit/build-optimizer": "^0.1302.1",
"@angular/cli": "^16.2.0",
"@angular/compiler-cli": "^16.2.0",
"@angular/language-service": "^16.2.0",
"@ngtools/webpack": "^16.2.0",
"@types/core-js": "^2.5.5",
"@types/hammerjs": "^2.0.41",
"@types/node": "^20.4.9",
"babel-loader": "^9.1.3",
"clean-webpack-plugin": "^4.0.0",
"css-loader": "^6.8.1",
"extract-loader": "^5.1.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.3",
"install": "^0.13.0",
"mini-css-extract-plugin": "^2.7.6",
"node-sass": "^9.0.0",
"npm": "^9.8.1",
"popper.js": "^1.16.1",
"purgecss-webpack-plugin": "^5.0.0",
"raw-loader": "^4.0.2",
"reflect-metadata": "^0.1.13",
"sass": "^1.64.2",
"sass-loader": "^13.3.2",
"scss-loader": "0.0.1",
"style-loader": "^3.3.3",
"ts-loader": "^9.4.4",
"typescript": "^4.9.5",
"webpack": "^5.88.2",
"webpack-cli": "^5.1.4",
"webpack-dev-middleware": "^6.1.1",
"webpack-dev-server": "^4.15.1",
"webpack-merge": "^5.9.0"
}
}
当我使用npm启动应用程序时,我会收到这个错误。
如果我使用webpack.dev.js中的相同配置,它可以正常工作。我犯了什么错误?有人能给我一些建议吗。