首先，得先了解开发环境:
1、开发环境
顾名思义，开发同学开发时使用的环境，每位开发同学在自己的dev分支上干活，提测前或者开发到一定程度，各位同学会合并代码，进行联调。
2.生产环境
即线上环境，用户使用的环境。由特定人员来维护，一般人没有权限去修改。
另外，还有个灰度发布，发生在预发布环境之后，生产环境之前。
生产环境一般会部署在多台机器上，以防某台机器出现故障，这样其他机器可以继续运行，不影响用户使用。灰度发布会发布到其中的几台机器上，验证新功能是否正常。如果失败，只需回滚这几台机器即可。
这时就会出现一些需求:
开发环境和生产环境的构建目标差异很大。
在开发环境中，我们需要强大的、具有实时重新加载或热模块替换能力和本地服务器。
而在生产环境中，我们目标则转向于关注更小的包，以及资源的优化，以改善加载时间。所以我们通常建议每个环境编写独立的webpack配置。
步骤
1、安装webpack-merge
cnpm i webpack-merge -S
2、新建一个config文件夹，在这个文件夹上个写3个webpack配置的文件，分别是 ：
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 MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry : './js/index.js',
output : {
path : path.resolve(__dirname, '../dist'),
filename : 'js/index.js'
},
module:{
rules : [{
test : /\.css$/,
use : ['style-loader',
{
loader:MiniCssExtractPlugin.loader,
options:{
publicPath: '../'
}
},
'css-loader',
{
loader : 'postcss-loader',
options : {
plugins : [
require('autoprefixer')({
browsers : [
'ie >=8',
'Firefox >=20',
'Safari >=5',
'Android >=4',
'Ios >=6',
'last 4 version'
]
})
]
}
}]
},{
test : /\.(png|jpg|gif|jpeg)$/,
use : [{
loader : 'file-loader',
options : {
esModule: false,
outputPath : './images'
}
},
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 65
},
quality: [0.65, 0.90],
speed: 4
}
}]
},{
test: /\.(htm|html)$/i,
use:['html-withimg-loader']
}]
},
resolve : {
alias : {
jQuery : path.resolve(__dirname, '../js/jquery-3.1.1.min.js')
}
},
plugins:[
new CleanWebpackPlugin(),
new webpack.ProvidePlugin({
$ : "jQuery"
}),
new HtmlWebpackPlugin({
template : './index.html',
filename : 'index.html',
minify : {
minimize : true,
removeAttributeQuotes : true,
removeComments : true,
collapseWhitespace : true,
minifyCSS : true,
minifyJS : true,
removeEmptyElements : false,
},
hash : true
}),
new MiniCssExtractPlugin({
filename : './css/index.css'
})
]
}4、提取开发环境配置到webpack.dev.conf.js，如下 ：
const merge = require('webpack-merge');
const common = require('./webpack.common.conf.js')
module.exports = merge(common, {
devtool : 'cheap-module-eval-source-map',
devServer : {
contentBase : './dist',
host : 'localhost',
port : 8080,
open : true,
}
}); 5、提取生产环境配置到webpack.prod.conf.js，如下 ：
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const merge = require('webpack-merge');
const common = require('./webpack.common.conf.js')
module.exports = merge(common, {
devtool : 'source-map',
plugins:[
new OptimizeCssAssetsWebpackPlugin({
assetNameRegExp : /\.css$/g,
cssProcessor : require('cssnano'),
cssProcessorPluginOptions : {
preset : ['default', {
discardComments : {
removeAll: true
}
}]
},
canPrint :true
})
]
});ps ：上面的merge是一个函数，第一个参数是公共配置的webpack配置，第二个是json对象。需要注意的是，我们把webpack的配置放在了config文件夹，则里面的一些文件路径需要做出改变，比如上面的
output : {
path : path.resolve(__dirname, '../dist'),
filename : 'js/index.js'
}现在变成 ../dist
6、在package.json新建打包命令，如下 ：
"scripts": {
"build:dev": "webpack --mode development --config ./config/webpack.dev.conf.js",
"build:prod": "webpack --mode development --config ./config/webpack.prod.conf.js",
"start": "webpack-dev-server --mode development --config ./config/webpack.dev.conf.js"
}build:dev 是开发环境的webpack配置，执行这个命令打包的时候，webpack则会以webpack.dev.conf.js这个文件的配置来打包
build:prod 是生产环境的webpack配置，执行这个命令打包的时候，webpack则会以webpack.prod.conf.js这个文件的配置来打包
以上是webpack的配置，下面是vite的介绍
我们只是开发环境用vite，测试和线上依然用的是webpack，这具体的原因也是因为vite本身的不成熟。
用vite能提升开发效率，开发的更舒爽
