从webpack缩小中排除模块 [英] Exclude module from webpack minification
问题描述
我们在单页面应用程序中使用WebPack。该应用程序部署到许多环境中。我们有一个要求，即应用程序需要在给定环境中调用特定端点。
We are using WebPack in a single page application. The application is deployed to many environments. We have a requirement where the application needs to call a specific endpoint in a given environment.
为了提供给定环境的端点地址，需要有一个环境模块。这是当前的解决方案（有很多，这不是问题的关键）。但是我们需要从缩小中排除config.js，以便在部署过程中将其覆盖。
In order to provide the endpoint address for the given environment is to have an environments module. This is the current solution (there are many and this is not the point of the question). However we need to exclude the config.js from minification so that it can be overwritten as part of the deployment process.
config.js如下所示：
The config.js looks like the following:
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配置如下所示：
The WebPack config looks like the following:
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 和模块装载机但没有发现任何有效的东西。模块加载器中的排除仍会导致模块缩小。
So far we have looked at externals and module loaders but have not found anything that works. The exclude in the module loader still causes the module to be minified.
我们查看了一些SO问题：
Some SO questions that we have looked at:
- Exclude react from webpack bundle
- Webpack and external libraries
- How can I exclude code path when bundling with webpack/browserify?
推荐答案
Webpack externals 是避免捆绑某些依赖项的好选择。
Webpack externals are a good option to avoid bundle certain dependencies.
但是我们需要从缩小中排除config.js，以便它可以覆盖
作为部署过程。
However we need to exclude the config.js from minification so that it can be overwritten as part of the deployment process.
将依赖项添加为外部不仅会将其从缩小中排除，而且甚至不会被webpack解析。
Adding a dependency as external not only excludes it from minification but it is not even resolved by webpack.
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 ）。
Add as external the path used to require your config.js. In my simple example the path corresponds to ./config. Associate it to the global variable that will contain your configuration object. In my case I just used config as the variable name (see below config.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 变量。
As you are preventing webpack to resolve the config.js module then it has to be available in the environment during runtime. One way could be to expose it as a config variable in the global context.
window.config = {
env: {
endpointUrl: 'http://1.2.3.4',
authUrl: 'http://5.6.7.8'
}
};
然后你可以加载一个特定的 config.js 任何给定环境的文件。
Then you can load a specific config.js file for any given environment.
<!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>
这篇关于从webpack缩小中排除模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
