12 區分開發環境和生產環境

現在我們把下面的webpack配置分別寫在3個檔案上

const path = require('path');

const webpack = require('webpack');
const htmlwebpackplugin = require('html-webpack-plugin');
const minics***tractplugin = require('mini-css-extract-plugin');
const optimizecssassetswebpackplugin = require('optimize-css-assets-webpack-plugin');
const  = require('clean-webpack-plugin');
module.exports = ,
devtool : 'source-map',
devserver : ,
module:
},},)]}
}]}, },,
quality: [0.65, 0.90],
speed: 4}}]
},]},
resolve : 
},plugins:[
new cleanwebpackplugin(),
new webpack.provideplugin(),
new htmlwebpackplugin(,
hash : true 
}),new minics***tractplugin(),
new optimizecssassetswebpackplugin(
}]},
canprint :true})]
}

1、安裝webpack-merge

cnpm i webpack-merge -s

webpack.common.conf.js  //共用的

webpack.dev.conf.js //開發環境使用的

webpack.prod.conf.js //生產環境使用的

3、提取公共的配置到webpack.common.conf.js ， 如下 ：

const path = require('path');

const webpack = require('webpack');
const htmlwebpackplugin = require('html-webpack-plugin');
const minics***tractplugin = require('mini-css-extract-plugin');
const  = require('clean-webpack-plugin');
module.exports = ,
module:
},'css-loader',)]
}}]
}, },
,quality: [0.65, 0.90],
speed: 4}}]
},]},
resolve : 
},plugins:[
new cleanwebpackplugin(),
new webpack.provideplugin(),
new htmlwebpackplugin(,
hash : true 
}),new minics***tractplugin()
]}

const merge = require('webpack-merge');

const common = require('./webpack.common.conf.js')
module.exports = merge(common, 
});

const optimizecssassetswebpackplugin = require('optimize-css-assets-webpack-plugin');

const merge = require('webpack-merge');
const common = require('./webpack.common.conf.js')
module.exports = merge(common, 
}]},
canprint :true})]
});

output :

6、在package.json新建打包命令，如下 ： 

"scripts":

build:prod 是生產環境的webpack配置，執行這個命令打包的時候，webpack則會以webpack.prod.conf.js這個檔案的配置來打包

案例

node 啟動區分開發環境和生產環境

node中常用的到的環境變數是node env，首先檢視是否存在 set node env 如果不存在則新增環境變數 set node env production 刪除環境變數 set node env 2 linux配置或mac系統環境 node中常用的到的環境變數是node env，首先檢視是...

Webpack5 區分開發和生成環境配置

對於專案的開發和生產打包，這兩種情況下，我們通常需要不同的webpack配置。有如下兩種方法，可以針對不同環境 應用不同的 webpack 配置。webpack.config.js module.exports env,ar if env env.production return config 執...

webpack環境 開發環境和生產環境的區分

模組熱更新 sourcemap 介面 規範檢查 生產環境的需求 提取公共 壓縮混淆 檔案壓縮 base64編碼 去除無用的 二者共同點 同樣的入口 同樣的 處理 loader處理 同樣的解析配置 使用webpack merge拼接開發環境和生產環境 配置檔案 webpack.dev.conf.js ...