Webpack - 排除 node_modules 并保留单独的浏览器和服务器管理

Posted 2023-03-07

【中文标题】Webpack - 排除 node_modules 并保留单独的浏览器和服务器管理

【英文标题】：Webpack - Excluding node_modules with also keep a separated browser and server management

【发布时间】：2018-09-18 16:03:17

【问题描述】：

（webpack.config.js文件内容如下）

我正在尝试对节点模块进行 webpack 排除。

我发现使用 webpack-node-externals 可以解决这个问题，但是在我的常见配置中使用它会导致另一个错误： Require is not defined on reflect-metadata - __webpack_require__ issue

所以...我想知道如何在浏览器端排除 webpack 捆绑而不遇到任何问题。

我的webpack 版本：3.11.0

---

webpack-config.js

const path = require('path');    
const webpack = require('webpack');
const merge = require('webpack-merge');
const AotPlugin = require('@ngtools/webpack').AotPlugin;
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;

var nodeExternals = require('webpack-node-externals');

module.exports = (env) => 
    // Configuration in common to both client-side and server-side bundles
    const isDevBuild = !(env && env.prod);
    const sharedConfig = 

        //externals: [nodeExternals()], // in order to ignore all modules in node_modules folder

        stats:  modules: false ,
        context: __dirname,
        resolve:  extensions: [ '.js', '.ts' ] ,
        output: 
            filename: '[name].js',
            publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
        ,
        module: 
            rules: [
                 test: /\.ts$/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] : '@ngtools/webpack' ,
                 test: /\.html$/, use: 'html-loader?minimize=false' ,
                 test: /\.css$/, use: [ 'to-string-loader', 'style-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] ,
                 test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' 
            ]
        ,
        plugins: [new CheckerPlugin()]
    ;

    // Configuration for client-side bundle suitable for running in browsers
    const clientBundleOutputDir = './wwwroot/dist';
    const clientBundleConfig = merge(sharedConfig, 
        entry:  'main-client': './ClientApp/boot.browser.ts' ,
        output:  path: path.join(__dirname, clientBundleOutputDir) ,
        plugins: [
            new webpack.DllReferencePlugin(
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            )
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin(
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            )
        ] : [
            // Plugins that apply in production builds only
            new webpack.optimize.UglifyJsPlugin(),
            new AotPlugin(
                tsConfigPath: './tsconfig.json',
                entryModule: path.join(__dirname, 'ClientApp/app/app.browser.module#AppModule'),
                exclude: ['./**/*.server.ts']
            )
        ])
    );

    // Configuration for server-side (prerendering) bundle suitable for running in Node
    const serverBundleConfig = merge(sharedConfig, 
        resolve:  mainFields: ['main'] ,
        entry:  'main-server': './ClientApp/boot.server.ts' ,
        plugins: [
            new webpack.DllReferencePlugin(
                context: __dirname,
                manifest: require('./ClientApp/dist/vendor-manifest.json'),
                sourceType: 'commonjs2',
                name: './vendor'
            )
        ].concat(isDevBuild ? [] : [
            // Plugins that apply in production builds only
            new AotPlugin(
                tsConfigPath: './tsconfig.json',
                entryModule: path.join(__dirname, 'ClientApp/app/app.server.module#AppModule'),
                exclude: ['./**/*.browser.ts']
            )
        ]),
        output: 
            libraryTarget: 'commonjs',
            path: path.join(__dirname, './ClientApp/dist')
        ,

        target: 'node',
externals: [nodeExternals()], // in order to ignore all modules in node_modules folder,
            devtool: 'inline-source-map'
        );

    return [clientBundleConfig, serverBundleConfig];
;

【问题讨论】：

我不确定我是否理解这个问题。你是说你想在没有被 webpack 捆绑但使用require 加载模块的浏览器中运行代码？

@AluanHaddad 不完全是。我总是想不捆绑节点模块。我想对浏览器端和服务器端保持不同的管理，但是如果我不在我的公共配置部分排除 node_modules 包，我会在 webpack-config 命令执行期间在 node_modules 文件夹上遇到很多解析错误。如果我在我的公共配置部分使用 webpack-node-externals，我会遇到链接问题问题

@AluanHaddad 我更好地解释自己。我总是需要从 webpack 中排除我的 node_modules，因为如果我将它们包含在我的包中，webpack 会给我在 node_modules 包上的很多解析错误。但是使用 webpack-node-externals 仅适用于服务器端，所以我需要找到一种浏览器端友好的方式来在浏览器端排除它们

我明白了，这样的错误表明您正在尝试加载尚未被 webback 捆绑的 commonJS 或 AMD 或 UMD 模块。为此，您需要一个模块加载器而不是模块捆绑器

尝试做所有这些，然后一个配置似乎一团糟

【参考方案1】：

知道了！

在发布我的解决方案之前，我要感谢 Aluan Haddad 对我上述问题的有用评论。

正如 Aluan 所建议的，事实上，问题与还需要使用模块加载器有关，而不是模块捆绑器。

所以，我遵循的步骤是：

安装 requireJS

==> http://requirejs.org/docs/node.html

从我的常见 webpack 配置中删除

externals: [nodeExternals()], // in order to ignore all modules in node_modules folder

并将其添加到我的服务器配置下

（在我的问题之前完成，但这是一个非常重要的步骤）[参见 webpack.config.js问题中的内容]

添加

target: 'node', 在我上面的外部点之前，在我的服务器端部分下（在我的问题之前完成，但这是一个非常重要的步骤）[请参阅问题中的 webpack.config.js 内容]

这样可以确保浏览器端保持 target:'web' （默认目标），并且 target 成为服务器的节点。

从 powershell 手动启动 webpack config vendor 命令

webpack --config webpack.config.vendor.js

从 powershell 手动启动 webpack 配置命令

webpack --config webpack.config.js

这对我有用！希望它也适用于其他阅读此问题并遇到此问题的人！