学习前端打包工具webpack和vite

首先，得先了解开发环境:

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能提升开发效率，开发的更舒爽