javascript 从 webpack 包中排除模块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29795782/
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 a module from webpack bundle
提问by SimenB
I'd like the same functionality like RequireJS empty:http://requirejs.org/docs/optimization.html#empty
我想要与 RequireJS http://requirejs.org/docs/optimization.html#empty相同的功能empty:
My use-case is that I include jquery-migratein development, but I'd like to exclude this when built for production.
我的用例是我包含jquery-migrate在开发中，但我想在为生产构建时排除它。
Using IgnorePluginjust makes it not included, and when requireing it in the code, it then throws an error (Uncaught Error: Cannot find module "jquery-migrate").
使用IgnorePluginjust 使它不包括在内，当require它在代码中时，它会抛出一个错误 ( Uncaught Error: Cannot find module "jquery-migrate")。
What I'd like to happen is for it to just return undefined, or something of the like (like empty:in RequireJS). Id like to not touch the import in the code, just configuring it to return undefined.
我想要发生的是它只返回 undefined 或类似的东西（比如empty:在 RequireJS 中）。我不想触及代码中的导入，只是将其配置为返回undefined.
EDIT: Using NormalModuleReplacementPluginworks, if I point the replacement to an empty file. But keeping an empty file around just for this seems unnecessary.
编辑：使用NormalModuleReplacementPlugin作品，如果我将替换指向一个空文件。但是为此保留一个空文件似乎没有必要。
回答by igl
I use the null-loader for blanking out modules. The noop-loader can be used for a less awkward if-else in the config.
我使用空加载器来清除模块。 noop-loader 可用于配置中不那么尴尬的 if-else。
Try:
尝试：
rules: [{
test: /jquery-migrate/,
use: IS_DEV ? 'null-loader' : 'noop-loader'
}]
回答by Peter Kese
You can try to make a resolve.alias in webpack.config:
你可以尝试在 webpack.config 中创建一个 resolve.alias：
resolve: {
alias: {
"jquery-migrate": process.env.NODE_ENV === 'production' ? "empty-module": "jquery-migrate"
}
}
回答by Jonathan Dumaine
Use Webpack's DefinePluginin combination with the normal production plugins (Dedupe and Uglify).
将 WebpackDefinePlugin与正常的生产插件（Dedupe 和 Uglify）结合使用。
Then in your code you can write:
然后在你的代码中你可以写：
if(DEBUG) {
var test = require('test');
alert(test);
}
And when it's built in production, the DEBUGwill be replaced with a literal if(false) { ... }which will be completely removed by the uglify plugin, so testwill only be required in a debug build.
当它在生产中构建时，DEBUG将被替换为一个文字if(false) { ... }，该文字将被 uglify 插件完全删除，因此test仅在调试构建中需要。
Here's a sample Grunt task config for grunt-webpackthat has developmentand productiontargets for the task:
下面是一个示例咕噜任务配置为grunt-webpack拥有development并production为任务目标：
development: {
devtool: "sourcemap",
output: {
pathinfo: true,
},
debug: true,
production: false,
plugins: [
new webpack.DefinePlugin({
DEBUG: true,
PRODUCTION: false
})
]
},
production: {
plugins: [
new webpack.DefinePlugin({
DEBUG: false,
PRODUCTION: true
}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
output: {
comments: false,
}
})
]
},
