• webpack打包常用配置项

    webpack打包配置项

    参考链接
    文件结构：最基础版 先安装 npm i webpack webpack-cli --dev
    在这里插入图片描述
    运行命令：npx webpack 进行打包

    1. 配置webpack.config.js文件：

    const path = require('path');
module.exports = {
    mode: 'development', // 开发环境 production: 生产环境  两个环境打包后的代码不一样
    entry: './src/index.js',  // 入口文件路径
    output: { // 打包后的文件名
        filename: 'dist.js', // 打包后的文件名
        path: path.resolve(__dirname, 'dist'), // 多级目录，__dirname是第一级，dist是第二级
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    2. 配置相关打包loader

    2.1. 打包css文件，如果新增style.css文件打包会报错，提示我们需要加载合适的loaders来加载css的文件类型：

    加载css文件需要加载两个loader: style-loader css-loader

    执行命令安装css loader: webpack的loader全部都是安装在开发者依赖中，因为在打包后都不需要这些了
npm i --dev style-loader css-loader
yarn add --dev style-loader css-loader

    • 1
    • 2
    • 3

    安装好后需要在webpack.config.js文件中配置它

    const path = require('path');
module.exports = {
    mode: 'development', // 开发环境 production: 生产环境  两个环境打包后的代码不一样
    entry: './src/index.js',  // 入口文件路径
    output: { // 打包后的文件名
        filename: 'dist.js', // 打包后的文件名
        path: path.resolve(__dirname, 'dist'), // 多级目录，__dirname是第一级，dist是第二级
    },

	// 配置loader........................
    // 以什么样的扩展名结尾的就匹配什么样的loader
    module: {
        rules: [
            {
                test: /\.css$/i, // 匹配正则：以.css结尾的扩展名文件
                use: ['style-loader', 'css-loader'], // 使用什么loader
            }
        ]
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    sass和less预处理的loader也可以这样配置

    2.2. 配置图片loader

    在webpack.config.js文件中配置图片loader
    图片使用内部的loader，所以key为type

    const path = require('path');
module.exports = {
    mode: 'development', // 开发环境 production: 生产环境  两个环境打包后的代码不一样
    entry: './src/index.js',  // 入口文件路径
    output: { // 打包后的文件名
        filename: 'dist.js', // 打包后的文件名
        path: path.resolve(__dirname, 'dist'), // 多级目录，__dirname是第一级，dist是第二级
    },
    // 以什么样的扩展名结尾的就匹配什么样的loader
    module: {
        rules: [
            {
                test: /\.css$/i, // 匹配正则：以.css结尾的扩展名文件
                use: ['style-loader', 'css-loader'], // 使用什么loader
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource', // 使用内部的loader，所以使用type
            }
        ]
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    2.3. 使用新js特性，要兼容低版本的浏览器时用babel这个工具来转义js代码，webpack支持相应的loader

    安装babel-loader：

    npm i babel-loader @babel/core @babel/preset-env --dev
yarn add --dev babel-loader @babel/core @babel/preset-env

    • 1
    • 2

    在webpack.config.js文件中配置

    const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 钩子函数
module.exports = {
    mode: 'development', // 开发环境 production: 生产环境  两个环境打包后的代码不一样
    devtool: 'inline-source-map', // 为了方便看打包后的代码，设置 inline-source-map 方便看打包后的源代码
    entry: './src/index.js',  // 入口文件路径
    output: { // 打包后的文件名
        filename: 'dist.js', // 打包后的文件名
        path: path.resolve(__dirname, 'dist'), // 多级目录，__dirname是第一级，dist是第二级
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'webpack打包项', // 网页的标题
        })
    ],
    // 以什么样的扩展名结尾的就匹配什么样的loader
    module: {
        rules: [
            {
                test: /\.css$/i, // 匹配正则：以.css结尾的扩展名文件
                use: ['style-loader', 'css-loader'], // 使用什么loader
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif|webp)$/i,
                type: 'asset/resource', // 使用内部的loader，所以使用type
            },
            {
                test: /\.js$/,
                exclude: /node_modules/, // 把node_modules这个文件去掉，这样就不会转义node_modules下面的代码
                use: {
                    loader: 'babel-loader', // 使用的loader
                    options: {
                        presets: ['@babel/preset-env'], // 转义loader
                    }
                }
            }
        ]
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    在这里插入图片描述
    执行命令 npx webpack后查看dist.js文件
    在这里插入图片描述

    3. 使用webpack插件自动生成html文件

    先安装html-webpack-plugin包

    npm i html-webpack-plugin --dev
yarn add html-webpack-plugin --dev

    • 1
    • 2

    3.2在webpack.config.js文件中导入并设置
    3.3然后再运行 npx webpack命令打包， dist目录下会自动生成一个.html文件
    在这里插入图片描述

    const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 钩子函数
module.exports = {
    mode: 'development', // 开发环境 production: 生产环境  两个环境打包后的代码不一样
    entry: './src/index.js',  // 入口文件路径
    output: { // 打包后的文件名
        filename: 'dist.js', // 打包后的文件名
        path: path.resolve(__dirname, 'dist'), // 多级目录，__dirname是第一级，dist是第二级
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'webpack打包项', // 网页的标题
        })
    ],
    // 以什么样的扩展名结尾的就匹配什么样的loader
    module: {
        rules: [
            {
                test: /\.css$/i, // 匹配正则：以.css结尾的扩展名文件
                use: ['style-loader', 'css-loader'], // 使用什么loader
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif|webp)$/i,
                type: 'asset/resource', // 使用内部的loader，所以使用type
            }
        ]
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    在这里插入图片描述

    4. 压缩打包js代码，这样可以压缩，减少打包体积：使用webpack另一个常用插件 terser-webpack-plugin

    安装插件：

    npm i terser-webpack-plugin --dev
yarn add --dev terser-webpack-plugin

    • 1
    • 2

    在webpack.config.js文件中配置，先导入

    const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 钩子函数
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    mode: 'development', // 开发环境 production: 生产环境  两个环境打包后的代码不一样
    devtool: 'inline-source-map', // 为了方便看打包后的代码，设置 inline-source-map 方便看打包后的源代码
    entry: './src/index.js',  // 入口文件路径
    output: { // 打包后的文件名
        filename: 'dist.js', // 打包后的文件名
        path: path.resolve(__dirname, 'dist'), // 多级目录，__dirname是第一级，dist是第二级
    },
    optimization: {
        minimize: true, // 是否压缩
        minimizer: [new TerserPlugin()], // 用什么工具压缩
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'webpack打包项', // 网页的标题
        })
    ],
    // 以什么样的扩展名结尾的就匹配什么样的loader
    module: {
        rules: [
            {
                test: /\.css$/i, // 匹配正则：以.css结尾的扩展名文件
                use: ['style-loader', 'css-loader'], // 使用什么loader
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif|webp)$/i,
                type: 'asset/resource', // 使用内部的loader，所以使用type
            },
            {
                test: /\.js$/,
                exclude: /node_modules/, // 把node_modules这个文件去掉，这样就不会转义node_modules下面的代码
                use: {
                    loader: 'babel-loader', // 使用的loader
                    options: {
                        presets: ['@babel/preset-env'], // 转义loader
                    }
                }
            }
        ]
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45

    在这里插入图片描述
    执行npx webpack后查看dist.js文件，去掉了空格，换行之类的
    在这里插入图片描述

    5.如有修改自动打包更新页面，使用webpack插件 webpack-dev-server

    安装插件

    npm i -D webpack-dev-server
yarn add --dev webpack-dev-server

    • 1
    • 2
    const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 钩子函数
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    mode: 'development', // 开发环境 production: 生产环境  两个环境打包后的代码不一样
    devtool: 'inline-source-map', // 为了方便看打包后的代码，设置 inline-source-map 方便看打包后的源代码
    entry: './src/index.js',  // 入口文件路径
    output: { // 打包后的文件名
        filename: 'dist.js', // 打包后的文件名
        path: path.resolve(__dirname, 'dist'), // 多级目录，__dirname是第一级，dist是第二级
    },
    optimization: {
        minimize: true, // 是否压缩
        minimizer: [new TerserPlugin()], // 用什么工具压缩
    },
    devServer: {
        static: './dist', // 指定目录
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'webpack打包项', // 网页的标题
        })
    ],
    // 以什么样的扩展名结尾的就匹配什么样的loader
    module: {
        rules: [
            {
                test: /\.css$/i, // 匹配正则：以.css结尾的扩展名文件
                use: ['style-loader', 'css-loader'], // 使用什么loader
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif|webp)$/i,
                type: 'asset/resource', // 使用内部的loader，所以使用type
            },
            {
                test: /\.js$/,
                exclude: /node_modules/, // 把node_modules这个文件去掉，这样就不会转义node_modules下面的代码
                use: {
                    loader: 'babel-loader', // 使用的loader
                    options: {
                        presets: ['@babel/preset-env'], // 转义loader
                    }
                }
            }
        ]
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48

    在这里插入图片描述
    为了方便启动项目，在package.json文件中配置scripts项

    package.json文件中添加scripts项
{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.22.15",
    "@babel/preset-env": "^7.22.15",
    "babel-loader": "^9.1.3",
    "css-loader": "^6.8.1",
    "html-webpack-plugin": "^5.5.3",
    "style-loader": "^3.3.3",
    "terser-webpack-plugin": "^5.3.9",
    "webpack": "^5.88.2"
  },
  "devDependencies": {
    "webpack-cli": "^5.1.4"
  }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    在这里插入图片描述
    命令行执行: npm start / yarn start就会自动打开 html页面,如果修改内容。
    由于打包后的dist.js文件名是一样的，浏览器会根据这个文件名进行缓存，一般为了避免浏览器进行缓存，会给文件名加上一串随机的字符，每次更新之后都改为新的字符，webpack支持每次打包后都生成新的字符。在webpack.config.js文件中，output修改filename文件名，
    在这里插入图片描述

    5. 如何给导入的路径设置别名，有时候js文件嵌套的比较深，访问相对路径需要使用很多的…/，webpack能实现一个路径别名来把这一串相对路径替换掉，key为别名，value:为真实目录

    比如ultils: path.resolve(__dirname, ‘src/ultils’);
    在这里插入图片描述

    比如printDate.js文件中引入了ultils下面的文件
    在这里插入图片描述
    可以把…/…/去掉,变为import { dateToStr } from “ultils/date”; 会匹配ultils的真实目录

    6. 如需分析打包后的结果，哪个文件体积大，webpack有一个可视化打包分析工具：webpack-bundle-analyzer

    安装工具：

    npm i webpack-bundle-analyzer --dev
yarn add --dev webpack-bundle-analyzer

    • 1
    • 2

    在webpack.config.js中配置

    const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 钩子函数
const TerserPlugin = require('terser-webpack-plugin'); // 钩子函数
const WebpackBundleAnalyzerPlugin = require('webpack-bundle-analyzer'); // 对象，也可以直接获取里面的BundleAnalyzerPlugin方法
// const WebpackBundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; // 下面直接使用new WebpackBundleAnalyzerPlugin()

module.exports = {
    mode: 'development', // 开发环境 production: 生产环境  两个环境打包后的代码不一样
    devtool: 'inline-source-map', // 为了方便看打包后的代码，设置 inline-source-map 方便看打包后的源代码
    entry: './src/index.js',  // 入口文件路径
    output: { // 打包后的文件名
        filename: '[name].[contenthash].js', // 打包后的文件名 // [name]:webpack会识别为默认的文件名，[contenthash]：会根据文件内容进行hash计算，得到不重复字符
        path: path.resolve(__dirname, 'dist'), // 多级目录，__dirname是第一级，dist是第二级
    },
    resolve: {
        alias: { // key: 别名, value: 真实的目录
            ultils: path.resolve(__dirname, 'src/ultils')
        }
    },
    optimization: {
        minimize: true, // 是否压缩
        minimizer: [new TerserPlugin()], // 用什么工具压缩
    },
    devServer: {
        static: './dist', // 指定目录
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'webpack打包项', // 网页的标题
        }),
        new WebpackBundleAnalyzerPlugin.BundleAnalyzerPlugin(), // WebpackBundleAnalyzerPlugin是个对象，点里面的BundleAnalyzerPlugin方法
    ],
    // 以什么样的扩展名结尾的就匹配什么样的loader
    module: {
        rules: [
            {
                test: /\.css$/i, // 匹配正则：以.css结尾的扩展名文件
                use: ['style-loader', 'css-loader'], // 使用什么loader
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif|webp)$/i,
                type: 'asset/resource', // 使用内部的loader，所以使用type
            },
            {
                test: /\.js$/,
                exclude: /node_modules/, // 把node_modules这个文件去掉，这样就不会转义node_modules下面的代码
                use: {
                    loader: 'babel-loader', // 使用的loader
                    options: {
                        presets: ['@babel/preset-env'], // 转义loader
                    }
                }
            }
        ]
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56

    在这里插入图片描述

  • 相关阅读:
    AI插件开发-AIApplicationSuite模块-应用程序-AIActionManagerSuite模块-动作管理-illustrator插件
    机器学习 day35（决策树）
    算法——二分查找
    【杂记】高并发的几种设计模式
    OpenAI视频生成Sora技术简析
    《每日一题》NO.46：何为WAT/CP/FT?
    代码随想录算法训练营第53天 | 1143、1035、53
    动态规划-买卖股票系列
    Java集合---Map
    ES 批量删除数据
  • 原文地址：https://blog.csdn.net/weixin_41166682/article/details/132695981