Webpack-排除node_modules并保留单独的浏览器和服务器管理 [英] Webpack - Excluding node_modules with also keep a separated browser and server management

问题描述

(下面的webpack.config.js文件内容)

(webpack.config.js file content below)

我正在尝试排除节点模块上的webpack.

I'm trying to make a webpack exclusion on node modules.

我发现使用webpack-node-externals可以解决此问题，但是在我的通用配置上使用它会导致另一个错误: 在反射元数据上未定义需求-__webpack_require__问题

I found that using webpack-node-externals works for it but using that on my common config causes this other error: Require is not defined on reflect-metadata - __webpack_require__ issue

所以...我想知道如何在浏览器端排除webpack捆绑，而不会出现任何问题.

So... I was wondering how can i exclude webpack bundling also on the browser side without getting any issue.

我的 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];
};

推荐答案

知道了！

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

Before posting my solution, I'd like to thanks Aluan Haddad for his useful comment in my question above.

实际上，正如Aluan所建议的那样，问题与需要使用模块加载器(而不是模块捆绑器)有关.

As suggested by Aluan, in fact, the problem was related to the need to use also a module loader, more than a module bundler.

因此，我遵循的步骤如下:

So, the steps that I followed are these:

• 安装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内容]
  这可确保浏览器端保留目标:"web"(默认目标)，并且目标成为仅用于服务器的节点.
• 从Powershell手动启动Webpack配置供应商命令 webpack --config webpack.config.vendor.js
• 从Powershell手动启动Webpack配置命令 webpack --config webpack.config.js

• Installing requireJS ==> http://requirejs.org/docs/node.html
• Removing externals: [nodeExternals()], // in order to ignore all modules in node_modules folder from my common webpack configuration and adding it under my server configuration (done before my question, but it's a really important step) [see webpack.config.js content in the question]
• Adding target: 'node', before my externals point above, under my server side section (done before my question, but it's a really important step) [see webpack.config.js content in the question]
  This makes sure that browser side keeps target:'web' (default target), and target becomes node just for the server.
• launched webpack config vendor command manually from powershell webpack --config webpack.config.vendor.js
• launched webpack config command manually from powershell webpack --config webpack.config.js

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

That worked for me! Hope It will works also for anyone else reading this question and encountering this issue!

这篇关于Webpack-排除node_modules并保留单独的浏览器和服务器管理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！