webpack学习---生产模式--生产模式基本模板

生产配置模板

                /*
                webpack.config.js  webpack的配置文件
                作用: 指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置）

                所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs。
                */

                // resolve用来拼接绝对路径的方法
                const {resolve} = require('path');
                const HtmlWebpackPlugin = require('html-webpack-plugin');
                const MiniCssExtractPlugin = require('mini-css-extract-plugin');
                const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

                process.env.NODE_ENV = 'production';

                module.exports = {
                // webpack配置
                // 入口起点
                entry: './src/js/index.js',
                // 输出
                output: {
                    // 输出文件名
                    filename: 'js/built.js',
                    // 输出路径
                    // __dirname nodejs的变量，代表当前文件的目录绝对路径
                    path: resolve(__dirname, 'build')
                },
                // loader的配置
                module: {
                    rules: [
                    // 详细loader配置
                    // 不同文件必须配置不同loader处理
                    //js代码检查eslint
                    {
                        test: /\.js$/,
                        exclude: /node_modules/,
                        // 优先执行
                        enforce: 'pre',
                        loader: 'eslint-loader',
                        options: {
                        // 自动修复eslint的错误
                        fix: true
                        }
                    },

                    //兼容性处理
                    {
                        test: /\.js$/,
                        exclude: /node_modules/,
                        loader: 'babel-loader',
                        options: {
                        // 预设：指示babel做怎么样的兼容性处理
                        presets: [
                            [
                            //第一种方式 基本js语法处理
                            '@babel/preset-env',
                            // 第三种家在方式  --- core-js
                            {
                                // 按需加载
                                useBuiltIns: 'usage',
                                // 指定core-js版本
                                corejs: {
                                version: 3
                                },
                                // 指定兼容性做到哪个版本浏览器
                                targets: {
                                chrome: '60',
                                firefox: '60',
                                ie: '9',
                                safari: '10',
                                edge: '17'
                                }
                            }
                            ]
                        ]
                        }
                    },

                    //处理css资源
                    {
                        // 匹配哪些文件
                        test: /\.css$/,
                        // 使用哪些loader进行处理
                        use: [
                        // use数组中loader执行顺序：从右到左，从下到上 依次执行
                        // 创建style标签，将js中的样式资源插入进行，添加到head中生效
                        // 'style-loader',
                        //*** 这个loader取代style-loader。作用：提取js中的css成单独文件
                        MiniCssExtractPlugin.loader,
                        // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
                        'css-loader',
                        //设置css兼容性
                        // 使用loader的默认配置
                        // 'postcss-loader',
                        // 修改loader的配置
                        {
                            loader: 'postcss-loader',
                            options: {
                            postcssOptions: {
                                plugins: [
                                [
                                    "postcss-preset-env"
                                ],
                                ],

                                // parser: "postcss-js",
                            },
                            // execute: true,
                            },
                        }
                        ]
                    },

                    {
                        //处理less文件
                        test: /\.less$/,
                        use: [
                        // 'style-loader',
                        //*** 这个loader取代style-loader。作用：提取js中的css成单独文件
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        //设置css兼容性
                        // 使用loader的默认配置
                        // 'postcss-loader',
                        // 修改loader的配置
                        {
                            loader: 'postcss-loader',
                            options: {
                            postcssOptions: {
                                plugins: [
                                [
                                    "postcss-preset-env"
                                ],
                                ],

                                // parser: "postcss-js",
                            },
                            // execute: true,
                            },
                        },
                        // 将less文件编译成css文件
                        // 需要下载 less-loader和less
                        'less-loader'
                        ]
                    },

                    // 处理外部(css)图片资源
                    {
                        // 问题：默认处理不了html中img图片
                        // 处理图片资源
                        test: /\.(jpg|png|gif)$/,
                        // 需要一个type 否则会出现问题
                        type: 'javascript/auto',
                        // 使用一个loader
                        // 下载 url-loader file-loader
                        loader: 'url-loader',
                        options: {
                        // 图片大小小于8kb，就会被base64处理
                        // 优点: 减少请求数量（减轻服务器压力）
                        // 缺点：图片体积会更大（文件请求速度更慢）
                        limit: 8 * 1024,
                        outputPath: 'imgs',
                        // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
                        // 解析时会出问题：[object Module]
                        // 解决：关闭url-loader的es6模块化，使用commonjs解析
                        esModule: false,
                        // 给图片进行重命名
                        // [hash:10]取图片的hash的前10位
                        // [ext]取文件原来扩展名
                        name: '[hash:10].[ext]',

                        }
                    },

                    // 处理html文件的img图片
                    {
                        test: /\.html$/,
                        // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
                        loader: 'html-loader',
                    },

                    // 打包其他资源(除了html/js/css资源以外的资源)
                    {
                        // 排除css/js/html资源
                        exclude: /\.(css|js|html|less|jpg|png)$/,
                        loader: 'file-loader',
                        options: {
                        name: '[hash:10].[ext]',
                        outputPath: 'media'
                        }
                    },

                    ]
                },

                optimization: {
                    //设置压缩css插件
                    minimizer: [
                    // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
                    // `...`,
                    new CssMinimizerPlugin(),
                    ],
                    //默认是在生产环境才会压缩代码,设置为true则开发环境开启压缩代码
                    minimize: true
                },

                // plugins的配置
                plugins: [
                    // 详细plugins的配置
                    // html-webpack-plugin
                    // 功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）
                    // 需求：需要有结构的HTML文件
                    new HtmlWebpackPlugin({
                    // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
                    template: './src/index.html',
                    minify: {
                        // 移除空格
                        collapseWhitespace: true,
                        // 移除注释
                        removeComments: true
                    }
                    }),

                    //从js提取css插件
                    new MiniCssExtractPlugin({
                    // 设置输出的文件目录和重设文件名
                    filename: 'css/built.css'
                    })
                ],
                // 模式
                mode: 'production'
                }

package.json配置

                {
                "devDependencies": {
                    "@babel/core": "^7.15.8",
                    "@babel/preset-env": "^7.15.8",
                    "babel-loader": "^8.2.3",
                    "core-js": "^3.18.3",
                    "css-loader": "^6.4.0",
                    "css-minimizer-webpack-plugin": "^3.1.1",
                    "eslint": "^7.32.0",
                    "eslint-config-airbnb-base": "^14.2.1",
                    "eslint-loader": "^4.0.2",
                    "eslint-plugin-import": "^2.25.2",
                    "file-loader": "^6.2.0",
                    "html-loader": "^3.0.0",
                    "html-webpack-plugin": "^5.4.0",
                    "jquery": "^3.6.0",
                    "less": "^4.1.2",
                    "less-loader": "^10.2.0",
                    "mini-css-extract-plugin": "^2.4.3",
                    "postcss": "^8.3.10",
                    "postcss-loader": "^6.2.0",
                    "postcss-preset-env": "^6.7.0",
                    "style-loader": "^3.3.1",
                    "url-loader": "^4.1.1",
                    "webpack": "^5.59.1",
                    "webpack-cli": "^4.9.1"
                },
                "browserslist": {
                    "development": [
                    "last 1 chrome version",
                    "last 1 firefox version",
                    "last 1 safari version"
                    ],
                    "production": [
                    ">0.2%",
                    "not dead",
                    "not op_mini all"
                    ]
                },
                "eslintConfig": {
                    "extends": "airbnb-base"
                }
                }