代码之家  ›  专栏  ›  技术社区  ›  Ashwani kumar

如何解决在webpack.dev.js文件中找不到入口模块和webpack中的错误?

  •  0
  • Ashwani kumar  · 技术社区  · 2 年前

    我使用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启动应用程序时,我会收到这个错误。

    Error message

    如果我使用webpack.dev.js中的相同配置,它可以正常工作。我犯了什么错误?有人能给我一些建议吗。

    0 回复  |  直到 2 年前
    推荐文章