4步完成基础webpack5项目的工程化

当前webpack配置支持：

1. css版本兼容 自动添加前缀
2. 自动对JS代码进行兼容
3. 对于本地图片资源小于10kb的都会自动转成base64编码(减少请求，大小规定可以自定义)
4. 支持txt，加载fonts字体，特殊文件CSV/XML处理，JSON模块parser的加载处理
5. 拆分入口文件，去掉重复代码分离，并且缓存第三方库
6. 支持 less css预编译
7. CSS和JS代码压缩

以下文件的配置模块安装：

npm install html-webpack-plugin --save-dev
npm install mini-css-extract-plugin -D
npm i css-loader style-loader - D
npm install postcss-preset-env
npm install less-loader less -D
npm i postcss -D
npm install css-minimizer-webpack-plugin -D
npm i autoprefixer -D
npm i postcss-loader -D
npm install terser-webpack-plugin -D
npm i file-loader -D
npm install csv-loader xml-loader -D
npm install toml yaml json5 -D
npm install babel-loader @babel/core @babel/preset-env -D
npm install @babel/runtime -D
npm install @babel/plugin-transform-runtime -D

注意：下面entry和plugins这两个对象中的文件引入和注释(创建默认的index.html，入口文件需要多个就创建多个，需要单个使用单个)

1.在项目根目录创建webpack.config.js文件中的配置

// resolve 用来拼接绝对路径的方法
const { resolve } = require('path');
// 打包html资源 安装：npm install html-webpack-plugin --save-dev
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 让css已link标签方式引入样式表 安装：npm install mini-css-extract-plugin -D
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 压缩css代码
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
// 自定义的JSON模块parser的加载(不需要使用的可以选择性删除对应的代码)
const toml = require('toml')
const yaml = require('yaml')
const json5 = require('json5')
// js代码压缩
const TerserPlugin = require('terser-webpack-plugin')


module.exports = (env) => {
    return {
        // 单入口
        // entry:'./src/index.js',

        // 多入口
        entry: {
            index: './src/index.js',
            another: './src/another-module.js'
        },
        //出口
        output: {
            // filename:'js/main.js',
            filename: "scripts/[name].[contenthash].js",
            // __dirname 是nodejs的变量，代表当前文件的绝对路径
            path: resolve(__dirname, './dist'),
            clean: true,// 清理上一次dist文件中旧的代码文件
            // assetModuleFilename:'image[contenthash][ext]'//资源模块文件名(自动生成哈希值文件名称)
            // publicPath: 'http://localhost:8080/'//可以配置一个域名 或者是一个cdn地址 （所有script和link标签都会添加这个域名前缀）
        },
        plugins: [
            // 详细的plugins配置
            // html资源处理-----------------------------------------------------------
            new HtmlWebpackPlugin({
                title: 'webpack配置的标题',
                template: './public/index.html',// 复制的模板
                inject: 'body'// 在body中生成script标签，默认是head标签内
            }),
            new MiniCssExtractPlugin({
                filename: 'styles/[contenthash].css'
            })
        ],
        module: {
            rules: [
                // 样式处理-----------------------------------------------------------
                {
                    // 匹配那些文件
                    test: /\.(css|less)$/,
                    // 使用那些loader进行处理
                    use: [

                        // 注意安装：cnpm i css-loader style-loader - D
                        // use数组中的loader执行顺序：从右到左，从上到下 依次执行
                        // 创建style标签，将js中的样式资源插入进行，添加到head中生效
                        // 'style-loader',
                        MiniCssExtractPlugin.loader,
                        // 将css文件变成commonjs模块，里面内容是样式字符串
                        'css-loader',
                        // css兼容
                        // 1.创建.browserslistrc 添加下的浏览器版本代码
                        // 2.浏览器版本代码：
                        // > 0.01%
                        // last 4 version
                        // not dead
                        // 3.注意安装：npm i postcss -D,npm i autoprefixer -D,npm i postcss-loader -D
                        // 4.最后在执行项目打包的时候 会吧使用到的css文件进行代码兼容添加
                        'postcss-loader', // 这里是下面注释对象的简写（使用当前简写方式的前提提要有.browserslistrc文件配置，在第二步）
                        // {
                        //     loader:'postcss-loader',
                        //     options:{
                        //         postcssOptions:{
                        //             plugins:['postcss-preset-env']
                        //         }
                        //     }
                        // }
                        'less-loader'
                    ]
                },
                // 图片和文本处理-----------------------------------------------------------
                // 注意安装：cnpm i file-loader -D
                {
                    test: /\.(png|svg|gif|jpe?g)$/,
                    type: 'asset',
                    generator: {
                        // 自定义文件夹/[图片原来的名字]+[6位哈希值][图片格式]
                        filename: 'image/[name].[hash:4][ext]',
                    },
                    parser: {
                        dataUrlCondition: {
                            maxSize: 10 * 1024 // 小于10kb的图片都转成base64编码（减少请求）
                        }
                    }
                },
                // txt文本文件在js中使用: import xx from'xxx.txt' 进行导入获取文本内容
                {
                    test: /\.txt$/,
                    type: 'asset/source'
                },
                // 加载fonts字体
                {
                    test: /\.(woff|woff2|eot|ttf|otf)$/,
                    type: 'asset/resource'
                },
                // 特殊文件CSV/XML处理-----------------------------------------------------------
                // 在js中使用 import xx from'xxx.xml', import xx from'xxx.csv'进行导入
                // 注意安装：npm install csv-loader xml-loader -D
                {
                    test: /\.(csv|tsv)$/,
                    use: 'csv-loader'
                },
                {
                    test: /\.xml$/,
                    use: 'xml-loader'
                },
                // JSON模块parser的加载处理-----------------------------------------------------------
                // 在js中使用 import xx from'xxx.toml', import xx from'xxx.yaml'进行导入
                // 注意安装：npm install toml yaml json5 -D
                {
                    test: /\.toml$/,
                    type: 'json',
                    parser: {
                        parse: toml.parse
                    }
                },
                {
                    test: /\.yaml$/,
                    type: 'json',
                    parser: {
                        parse: yaml.parse
                    }
                },
                {
                    test: /\.json5$/,
                    type: 'json',
                    parser: {
                        parse: json5.parse
                    }
                },
                // JS兼容处理-----------------------------------------------------------
                // 注意安装：npm install babel-loader @babel/core @babel/preset-env -D
                //            npm install @babel/runtime -D
                //            npm install @babel/plugin-transform-runtime -D
                {
                    test: /\.js$/,
                    exclude: /node_modules/,// 不需要编译node_modules中的js文件
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env'],
                            plugins: [
                                [
                                    '@babel/plugin-transform-runtime'
                                ]
                            ]
                        }
                    }
                }
            ]
        },
        optimization: {
            minimizer: [
                new CssMinimizerPlugin(),
                new TerserPlugin()
            ],
            // 主要是拆分入口文件，重复代码分离,并且缓存第三方库
            splitChunks: {
                // chunks:'all'
                cacheGroups: {
                    vendor: {
                        test: /[\\/]node_modules[\\/]/,
                        name: 'vendors',
                        chunks: 'all'
                    }
                }
            },

        },
        // npx webpack-dev-server
        devServer: {
            static: './dist'
        },
        devtool: 'inline-source-map', // 快速找到代码报错的文件和行数（帮助我们bug定位）
        mode:env.production?'production':'development'
        // mode: 'development',// 开发模式
        // mode:'production'// 生产模式
    }
}

2.在项目根目录创建 .browserslistrc文件 配置CSS和JS代码兼容范围配置

该文件表示 某浏览器市场占比大于1%的都进行CSS兼容和JS兼容小于1%不考虑，并且进行当前浏览器最近4个版本进行自动代码添加和兼容

> 1%
last 4 version
not dead

3.在项目根目录创建postcss.config.js 文件配置16进制的色值的 转化和兼容

// 当前文件是用于webpack打包的时候读取 css兼容配置文件，和color值转化成兼容最佳的rgba
module.exports = {
    plugins:[
        require('postcss-preset-env')
    ]
}

4.在项目根目录package.json文件修改scripts对象的npm 命令

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve -c ./webpack.config.js --env development",
    "build": "webpack -c ./webpack.config.js --env production"
  },

运行项目：npm run start

打包项目：npm run build

欢迎查看下一篇webpack5文章是 对当前配置进行了抽离 和文件管理使代码更加的简洁明确

进一步的提高代码的可读性和维护性

我是马丁的车夫，欢迎转发收藏！