我有一些开发的东西 - 例如我想不会破坏我的分布式构建文件的模拟。
在RequireJS中，您可以在插件文件中传递配置，并根据该条件有条件地提供所需的内容。
对于webpack，似乎没有办法做到这一点。首先为环境创建运行时配置我使用resolve.alias根据环境重新命名需求，例如：
// All settings.
var all = {
fish: 'salmon'
};
// `envsettings` is an alias resolved at build time.
module.exports = Object.assign(all, require('envsettings'));
然后在创建webpack配置时，我可以动态分配envsettings指向的文件（即webpackConfig.resolve.alias.envsettings = './' + env）。
不过我想做的事情如下：
if (settings.mock) {
// Short-circuit ajax calls.
// Require in all the mock modules.
}
但显然我不想在环境不是模拟的情况下构建那些模拟文件。
我可以再次使用resolve.alias手动将所有这些需求重新命名为存根文件 - 但是有没有一种感觉不那么hacky的方法？
我有什么想法可以做到这一点？谢谢。
你可以使用define plugin。
我通过在你的webpack构建文件中做一些简单的事情来使用它，其中env是导出设置对象的文件的路径：
// Webpack build config
plugins: [
new webpack.DefinePlugin({
ENV: require(path.join(__dirname, './path-to-env-files/', env))
})
]
// Settings file located at `path-to-env-files/dev.js`
module.exports = { debug: true };
然后在你的代码中
if (ENV.debug) {
console.log('Yo!');
}
如果条件为false，它将从构建文件中删除此代码。你可以看到一个工作的Webpack build example here。
不知道为什么“webpack.DefinePlugin”答案是定义基于环境的导入/需求的最顶层的答案。
这种方法的问题在于您仍然将所有这些模块交付给客户端 - >例如使用webpack-bundle-analyezer进行检查。并没有减少你的bundle.js的大小:)
所以真正运作良好且更符合逻辑的是：NormalModuleReplacementPlugin
因此，而不是做一个on_client条件要求 - >首先不要包含不需要的文件到bundle
希望有所帮助
使用ifdef-loader。在您的源文件中，您可以执行类似的操作
/// #if ENV === 'production'
console.log('production!');
/// #endif
相关的webpack配置是
const preprocessor = {
ENV: process.env.NODE_ENV || 'development',
};
const ifdef_query = require('querystring').encode({ json: JSON.stringify(preprocessor) });
const config = {
// ...
module: {
rules: [
// ...
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: `ifdef-loader?${ifdef_query}`,
},
},
],
},
// ...
};
我最终使用类似于Matt Derrick' Answer的东西，但担心两点：
ENV时都会注入完整的配置（这对大型配置很糟糕）。require(env)指向不同的文件。我想出的是一个简单的作曲家，它构建一个配置对象并将其注入配置模块。 这是文件结构，Iam用于此：
config/
└── main.js
└── dev.js
└── production.js
src/
└── app.js
└── config.js
└── ...
webpack.config.js
main.js包含所有默认配置内容：
// main.js
const mainConfig = {
apiEndPoint: 'https://api.example.com',
...
}
module.exports = mainConfig;
dev.js和production.js只保存配置内容覆盖主配置：
// dev.js
const devConfig = {
apiEndPoint: 'http://localhost:4000'
}
module.exports = devConfig;
重要的部分是组成配置的webpack.config.js，并使用DefinePlugin生成一个环境变量__APP_CONFIG__，它包含组合的配置对象：
const argv = require('yargs').argv;
const _ = require('lodash');
const webpack = require('webpack');
// Import all app configs
const appConfig = require('./config/main');
const appConfigDev = require('./config/dev');
const appConfigProduction = require('./config/production');
const ENV = argv.env || 'dev';
function composeConfig(env) {
if (env === 'dev') {
return _.merge({}, appConfig, appConfigDev);
}
if (env === 'production') {
return _.merge({}, appConfig, appConfigProduction);
}
}
// Webpack config object
module.exports = {
entry: './src/app.js',
...
plugins: [
new webpack.DefinePlugin({
__APP_CONFIG__: JSON.stringify(composeConfig(ENV))
})
]
};
最后一步是config.js，它看起来像这样（在这里使用es6 import export语法，因为它在webpack下）：
const config = __APP_CONFIG__;
export default config;
在你的app.js中，你现在可以使用import config from './config';来获取配置对象。
另一种方法是使用JS文件作为proxy，让该文件加载commonjs中感兴趣的模块，并将其导出为es2015 module，如下所示：
// file: myModule.dev.js
module.exports = "this is in dev"
// file: myModule.prod.js
module.exports = "this is in prod"
// file: myModule.js
let loadedModule
if(WEBPACK_IS_DEVELOPMENT){
loadedModule = require('./myModule.dev.js')
}else{
loadedModule = require('./myModule.prod.js')
}
export const myString = loadedModule
然后您可以在您的应用中正常使用ES2015模块：
// myApp.js
import { myString } from './store/myModule.js'
myString // <- "this is in dev"
面对与OP相同的问题并且由于许可，不在某些构建中包含某些代码，我采用了webpack-conditional-loader如下：
在我的构建命令中，我为我的构建适当地设置了一个环境变量。例如package.json中的'demo'：
...
"scripts": {
...
"buildDemo": "./node_modules/.bin/webpack --config webpack.config/demo.js --env.demo --progress --colors",
...
我读到的文档中遗漏的令人困惑的一点是，我必须通过确保将我的env变量注入到全局进程中，从而在我的webpack.config / demo.js中将其显示在整个构建过程中：
/* The demo includes project/reports action to access placeholder graphs.
This is achieved by using the webpack-conditional-loader process.env.demo === true
*/
const config = require('./production.js');
config.optimization = {...(config.optimization || {}), minimize: false};
module.exports = env => {
process.env = {...(process.env || {}), ...env};
return config};
有了这个，我可以有条件地排除任何东西，确保任何相关的代码被正确地从生成的JavaScript中甩掉。例如，在我的routes.js中，演示内容不受其他构建的影响：
...
// #if process.env.demo
import Reports from 'components/model/project/reports';
// #endif
...
const routeMap = [
...
// #if process.env.demo
{path: "/project/reports/:id", component: Reports},
// #endif
...
这适用于webpack 4.29.6。
虽然这不是最佳解决方案，但它可能适合您的一些需求。如果你想在节点和浏览器中运行不同的代码使用这对我有用：
if (typeof window !== 'undefined')
return
}
//run node only code now
使用环境变量来创建dev和prod部署：
我一直在努力在我的webpack配置中设置env。我通常想要的是设置env，以便可以在webpack.config.js，postcss.config.js和入口点应用程序本身（通常是index.js）内部到达。我希望我的发现可以帮助某人。
我想出的解决方案是传入--env production或-- env development，然后在webpack.config.js中设置模式。然而，这并没有帮助我在我想要的地方使env可用（见上文），所以我还需要明确设置process.env.NODE_ENV，如推荐的here。我用分支working和not_working创建了一个最小的回购。正如在not_working中可以证实的那样，使用webpack.DefinePlugin设置process.env.NODE_ENV，因为记录的here不能按预期工作。
来自repo的webpack.config.js中最相关的部分如下。
...
module.exports = mode => {
process.env.NODE_ENV = mode;
if (mode === "production") {
return merge(commonConfig, productionConfig, { mode });
}
return merge(commonConfig, developmentConfig, { mode });
};