从 webpack 缩小中排除模块答案

【问题标题】：Exclude module from webpack minification从 webpack 缩小中排除模块
【发布时间】：2016-02-28 04:52:00
【问题描述】：

我们在单页应用程序中使用 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))
        })
    ]
};

到目前为止，我们已经查看了 externals 和 module loaders，但没有发现任何可行的方法。模块加载器中的 exclude 仍然会导致模块被缩小。

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

【问题讨论】：

标签： javascript webpack bundling-and-minification

【解决方案1】：

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>

【讨论】：

这正是我们想要的，但值得指出的是，您需要将 config.js 的副本添加到 webpack 脚本的 build 文件夹中。

【解决方案2】：

我认为uglify-loader 可能会成功。与开箱即用相比，它为您提供了对缩小结果的更多控制。

【讨论】：