Question

我们在单页面应用程序中使用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，但未发现任何有效的内容。模块加载器中的排除仍会导致模块缩小。

我们已经看过一些SO问题：

Answer 1

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

但是我们需要将min.ches从minification中排除可以作为部署过程的一部分覆盖。

将依赖项添加为外部不仅会将其从缩小中排除，而且甚至不会被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>

Answer 2

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

从webpack缩小中排除模块

2 个答案:

webpack.config.js

index.js

config.js

的index.html