我想知道如何指示我的webpack配置为开发和生产模式运行不同的源映射。
事实上，我只是评论掉了我不想要的一个，这显然很不方便，我希望这个决定是根据我正在运行的npm脚本动态做出的——生产服务器或webpack-dev服务器。
我已经有了一个对应于开发模式(const debug)的变量，但我不确定如何在配置中使用它来确定不同的源映射。
这是我当前的配置。。。
Webpack.config.js
const debug = process.env.NODE_ENV !== "production";
const webpack = require('webpack');
const path = require('path');
module.exports = {
// devtool: 'eval-source-map',
devtool: 'source-map',
entry: path.join(__dirname, 'public', 'app-client.js'),
devServer: {
inline: true,
port: 3333,
contentBase: "public/static/",
historyApiFallback: {
index: '/index-static.html'
}
},
output: {
path: path.join(__dirname, 'public', 'static', 'js'),
publicPath: "/js/",
filename: 'bundle.js'
},
module: {
loaders: [
{
test: path.join(__dirname, 'public'),
loader: ['babel-loader'],
query: {
presets: debug ? ['react', 'es2015', 'react-hmre', 'stage-2'] : ['react', 'es2015', 'stage-2']
}
},
{
test: /.(jpe?g|png|gif|svg)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
}
]
},
plugins: debug ? [] : [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false },
mangle: true,
sourcemap: false,
beautify: false,
dead_code: true
}),
]
}
NODE_ENV时，才设置webpack.config.js中的process.env.NODE_ENV，例如在package.json中使用NODE_ENV webpack。如果您也需要支持Windows，请使用env-variable软件包。
有关详细信息和其他方法，请参阅生产建筑指南。
TL:DR-webpack.config.js文件可以导出具有2个参数的函数。当调用webpack时，这些参数中的任何一个都可以用于动态设置配置选项。
第一个参数是可以设置为
production或development(或任何其他值)的环境。I.E$webpack --env production。第二个参数是一个选项映射，可用于访问任何传递的选项。即CCD_ 12。
以下有用文档的更多信息、示例和链接：
这适用于webpack 5(但我认为也可能适用于webpack 4)。我从webpack配置类型文档中得到的所有这些信息，特别是第一部分"；导出函数"；。
以下示例直接来自webpack文档。它们不使用NODE_ENV变量，而是使用webpackenv.production变量将mode配置选项相应地设置为'production'或'development'。设置CCD_ 17配置选项"；将CCD_ 19上的CCD_ 18设置为[production或development]"查看这些文档了解更多信息。
module.exports = function(env, argv) {
return {
mode: env.production ? 'production' : 'development',
// Note that they also set devtool here based on the env variable
devtool: env.production ? 'source-map' : 'eval',
plugins: [
new TerserPlugin({
terserOptions: {
compress: argv.mode === 'production' // only if `--mode production` was passed
}
})
]
};
};
如果您使用上面的示例来设置模式和devtool，那么您应该能够从plugins数组中完全删除DefinePlugin，因为这些选项将在后台自动为您包括和设置插件。然而，如果您想使您的配置尽可能与当前设置相似，您可以简单地使用三元运算符来设置devtool选项：
const debug = process.env.NODE_ENV !== "production";
const webpack = require('webpack');
const path = require('path');
module.exports = {
// dynamically set devtool based on debug status
devtool: debug ? 'eval-source-map' : 'source-map',
entry: path.join(__dirname, 'public', 'app-client.js'),
devServer: {
inline: true,
port: 3333,
contentBase: "public/static/",
historyApiFallback: {
index: '/index-static.html'
}
},
output: {
path: path.join(__dirname, 'public', 'static', 'js'),
publicPath: "/js/",
filename: 'bundle.js'
},
module: {
loaders: [
{
test: path.join(__dirname, 'public'),
loader: ['babel-loader'],
query: {
presets: debug ? ['react', 'es2015', 'react-hmre', 'stage-2'] : ['react', 'es2015', 'stage-2']
}
},
{
test: /.(jpe?g|png|gif|svg)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
}
]
},
plugins: debug ? [] : [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false },
mangle: true,
sourcemap: false,
beautify: false,
dead_code: true
}),
]