从Web包缩小中排除模块

Exclude module from webpack minification

本文关键字：排除 模块 缩小 Web 包缩小      更新时间：2023-09-26

我们在单页应用程序中使用WebPack。该应用程序已部署到许多环境中。我们有一个要求，应用程序需要在给定的环境中调用特定的端点。

为了提供给定环境的端点地址，需要有一个环境模块。这是目前的解决方案（有很多，但这不是问题的重点）。但是，我们需要将config.js从缩小中排除，以便在部署过程中覆盖它。

config.js如下所示：

module.exports = {
    env: {
        endpointUrl: 'http://1.2.3.4',
        authUrl: 'http://5.6.7.8'
    }
};

并使用以下内容进行引用：

const endpointUrl = config.env.endpointUrl;
const authUrl = config.env.authUrl;

WebPack配置如下所示：

var webpack = require('webpack');
​
module.exports = {
    entry: {
        main: './src/js/main.jsx',
        login: './src/js/login-main.jsx'
    },
    output: {
        path: __dirname + '/dist',
        filename: '[name].bundle.js'
    },
    devtool: 'source-map',
    module: {
        loaders: [{
            test: /.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            plugins: ['transform-react-jsx'],
            query: {stage: 0}
        }, {
            test: /'.jsx?$/,
            exclude: /node_modules/,
            loader: 'eslint-loader'
        }]
    },
    plugins: [
        new webpack.ProvidePlugin({
            fetch: 'imports?this=>global!exports?global.fetch!whatwg-fetch'
        }),
        new webpack.DefinePlugin({
            __DEV__: JSON.stringify(JSON.parse(process.env.DEV || false))
        })
    ]
};

到目前为止，我们已经研究了外部和模块加载程序，但没有发现任何有效的方法。模块加载程序中的排除仍然会导致模块被缩小。

我们研究过的一些SO问题：

  • 从webpack捆绑包中排除react
  • Webpack和外部库
  • 与webpack/browsrify绑定时，如何排除代码路径

Webpack externals是避免捆绑某些依赖关系的好选择。

然而，我们需要将config.js排除在缩小之外，以便可以作为部署过程的一部分进行覆盖。

将依赖项添加为外部不仅将其从缩小中排除，而且webpack甚至无法解析它。

webpack.config.js

var webpack = require('webpack');
module.exports = {
  entry: {
    index: './src/index.js'
  },
  output: {
    path: './dist',
    filename: 'bundle.js'
  },
  externals: {
    './config': 'config'
  }
};

将用于要求config.js的路径添加为外部路径。在我的简单示例中，路径对应于./config。将其关联到将包含配置对象的全局变量。在我的例子中，我只是使用config作为变量名（参见下面的config.js）。

index.js

const config = require('./config');
const endpointUrl = config.env.endpointUrl;
const authUrl = config.env.authUrl;
console.log(endpointUrl);
console.log(authUrl);

由于您正在阻止webpack解析config.js模块，因此它必须在运行时在环境中可用。一种方法是在全局上下文中将其公开为config变量。

config.js

window.config = {
  env: {
    endpointUrl: 'http://1.2.3.4',
    authUrl: 'http://5.6.7.8'
  }
};

然后，您可以为任何给定的环境加载特定的config.js文件。

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Webpack</title>
</head>
<body>
  <script type="text/javascript" src="config.js"></script>
  <script type="text/javascript" src="dist/bundle.js"></script>
</body>
</html>

我认为uglify加载程序可能会成功。它为您提供了对缩小结果的更多控制，而不是开箱即用。

相关文章：