从webpack的压缩中排除模块

Question

从webpack的压缩中排除模块

javascriptwebpackbundling-and-minification

34

我们在一个单页应用程序中使用了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 问题：

- Bronumski

2个回答

5

我认为uglify-loader可能会有帮助。它比默认的压缩功能提供更多的控制，使结果更加精简。

- Juho Vepsäläinen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dreyescat · Accepted Answer

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'
  }
};

将用于require你的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>