Javascript 从 webpack 缩小中排除模块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33915826/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Exclude module from webpack minification
提问by Bronumski
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.
我们在单页应用程序中使用 WebPack。该应用程序部署到许多环境中。我们要求应用程序需要在给定环境中调用特定端点。
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:
config.js 如下所示：
module.exports = {
env: {
endpointUrl: 'http://1.2.3.4',
authUrl: 'http://5.6.7.8'
}
};
And is referenced using the following:
并使用以下内容进行引用：
const endpointUrl = config.env.endpointUrl;
const authUrl = config.env.authUrl;
The WebPack config looks like the following:
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 far we have looked at externalsand module loadersbut have not found anything that works. The exclude in the module loader still causes the module to be minified.
到目前为止，我们已经查看了外部组件和模块加载器，但还没有找到任何有效的方法。模块加载器中的 exclude 仍然会导致模块被缩小。
Some SO questions that we have looked at:
我们看过的一些 SO 问题：
采纳答案by dreyescat
Webpack externalsare a good option to avoid bundle certain dependencies.
Webpack externals是避免捆绑某些依赖项的好选择。
However we need to exclude the config.js from minification so that it can be overwritten as part of the deployment process.
但是，我们需要从缩小中排除 config.js，以便它可以作为部署过程的一部分被覆盖。
Adding a dependency as external not only excludes it from minification but it is not even resolved by webpack.
将依赖项添加为外部不仅会将其排除在缩小之外，而且 webpack 甚至无法解决它。
webpack.config.js
webpack.config.js
var webpack = require('webpack');
module.exports = {
entry: {
index: './src/index.js'
},
output: {
path: './dist',
filename: 'bundle.js'
},
externals: {
'./config': 'config'
}
};
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 configas the variable name (see below config.js).
添加用于要求您的config.js. 在我的简单示例中，路径对应于./config. 将其关联到将包含您的配置对象的全局变量。在我的情况下，我只是用作config变量名（见下文config.js）。
index.js
索引.js
const config = require('./config');
const endpointUrl = config.env.endpointUrl;
const authUrl = config.env.authUrl;
console.log(endpointUrl);
console.log(authUrl);
As you are preventing webpack to resolve the config.jsmodule then it has to be available in the environment during runtime. One way could be to expose it as a configvariable in the global context.
当您阻止 webpack 解析config.js模块时，它必须在运行时在环境中可用。一种方法是将其作为config全局上下文中的变量公开。
config.js
配置文件
window.config = {
env: {
endpointUrl: 'http://1.2.3.4',
authUrl: 'http://5.6.7.8'
}
};
Then you can load a specific config.jsfile for any given environment.
然后，您可以config.js为任何给定环境加载特定文件。
index.html
索引.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>
回答by Juho Veps?l?inen
I think uglify-loadermight do the trick. It provides you more control over the minification result than what you get out of the box.
我认为uglify-loader可能会成功。与开箱即用相比，它可以让您更好地控制缩小结果。
