Question

我正在使用Angular 4开发一个带有webpack作为捆绑器的应用程序。一切正常，除了关于forms.es5.js的捆绑。不幸的是，这个模块被打包到webpack正在创建的每个块中。

我怎么能告诉webpack将这个模块从块中取出，因为它已经在main.bundle.js中了？

以下是我的webpack配置的相关部分：

module.exports = {
    "entry": {
        "main": [
            "./src/main.ts"
        ],
        "polyfills": [
            "./src/polyfills.ts"
        ],
        "vendor": [
            "./src/vendor.ts"
        ]
    },
    "resolve": {
        "extensions": [
            ".ts",
            ".js"
        ],
        "modules": [
             "./node_modules",
        ],
        "symlinks": true
    },
    "resolveLoader": {
        "modules": [
            "./node_modules",
        ]
    },
    "output": {
        "path": path.join(process.cwd(), "dist"),
        "publicPath": "/assets/",
        "filename": "[name].bundle.js",
        "chunkFilename": "[id].chunk.js"
    },
    "module": {
        "rules": [
            {
                "enforce": "pre",
                "test": /\.js$/,
                "loader": "source-map-loader",
                "exclude": [
                    /\/node_modules\//
                ]
            },
            {
                 "test": /\.html$/,
                "loader": "raw-loader"
            },
            {
                "test": /\.ts$/,
                "loader": "@ngtools/webpack"
            },
            {
                "test": /\.css$/,
                "use": [ 'style-loader', 'css-loader' ]
            },
            {
                "test": /\.(jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
                "loader": "url-loader?name=[name].[hash:20].[ext]&limit=10000"
            }
        ]
    },
    "plugins": [
        new ProvidePlugin({
            _: 'lodash'
        }),
        new ContextReplacementPlugin(/moment[\/\\]locale$/, /de/),
        new NoEmitOnErrorsPlugin(),
        new ProgressPlugin(),
        new GlobCopyWebpackPlugin({
            "patterns": [
                "assets"
            ],
            "globOptions": {
                "cwd": path.join(process.cwd(), "src"),
                "dot": true,
                "ignore": "**/.gitkeep"
            }
        }),
        new HtmlWebpackPlugin({
            "template": "./src/index.html",
        }),
        new HtmlWebpackPlugin({
            "template": "./src/faq.html",
            "filename": "./faq.html",
        }),
        new HtmlWebpackPlugin({
            "template": "./src/terminvereinbarung.html",
            "filename": "./terminvereinbarung.html",
        }),
        new HtmlWebpackPlugin({
            "template": "./src/filialsuche.html",
            "filename": "./filialsuche.html",
        }),
        new HtmlWebpackPlugin({
            "template": "./src/suche.html",
            "filename": "./suche.html",
        }),
        new HtmlWebpackPlugin({
            "template": "./src/dividendenrechner.html",
            "filename": "./dividendenrechner.html",
        }),
        new CommonsChunkPlugin({
            name: ['main', 'vendor', 'polyfills']
        }),
        new ExtractTextPlugin('styles.css')
    ]
};

非常感谢。

Answer 1

对于其他绊脚石的人：经常，问题出现在电脑前。

问题是，我还在我的App-Component和子模块中导入了表单模块。

Angular 4 with webpack：在每个块中形成模块

1 个答案: