webpack打包常用配置项

已于 2023-09-05 22:36:14 修改
阅读量1.1k 收藏 2
点赞数 1
文章标签： webpack 前端 node.js
于 2023-09-05 17:23:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41166682/article/details/132695981
版权

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是第二级
    }
}

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

安装好后需要在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
            }
        ]
    }
}

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
            }
        ]
    }
}

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

在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
                    }
                }
            }
        ]
    }
}

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

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

先安装html-webpack-plugin包

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

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
            }
        ]
    }
}

在这里插入图片描述

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

安装插件：

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

在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
                    }
                }
            }
        ]
    }
}

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

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

安装插件

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

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
                    }
                }
            }
        ]
    }
}

在这里插入图片描述
为了方便启动项目，在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"
  }
}

在这里插入图片描述
命令行执行: 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

在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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack一键使用原配置项打包
06-14
shell脚本 git管理源码时，开发配置项和发版配置项不一致时，开发时设置开发配置项不被跟踪，发版时使用原配置项发版，不用手动去一个个修改
webpack 将打包后的静态资源文件夹转成压缩包
最新发布
gu2022_3_5_21_23的博客
03-07 439
vue-cli publicPath :
Webpack打包压缩
m0_63535801的博客
01-30 1140
浏览器从服务器访问网页时获取的 JavaScript、CSS 资源都是文本形式的，文件越大网页加载时间越长。为了提升网页加速速度和减少网络传输流量，可以对这些资源进行压缩。压缩的方法除了可以通过 GZIP 算法对文件压缩外，还可以对文本本身进行压缩。对文本本身进行压缩的作用除了有提升网页加载速度的优势外，还具有混淆源码的作用。由于压缩后的代码可读性非常差，就算别人下载到了网页的代码，也大大增加了代码分析和改造的难度。下面来一一介绍如何在 Webpack 中压缩代码。
webpack打包vue项目基础配置
09-26
基于webpack4的一个针对vue基础项目的打包配置，对基础的vue项目进行简单的打包配置，可以支持less，scss，sass等css预编译，简单明了，教程：https://www.jianshu.com/p/81bfe6ba1c04
webpack常用配置项配置文件介绍
09-01
主要为大家详细介绍了webpack常用配置项配置文件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
webpack配置文件和常用配置项介绍
08-30
本篇文章主要介绍了webpack配置文件和常用配置项的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
Vue webpack 项目自动打包压缩成zip文件的方法
10-16
主要介绍了Vue -- webpack 项目自动打包压缩成zip文件的方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
webpack的一些常用打包配置
蓝胖子的博客
10-12 4174
webpack的一些常用打包配置
1. webpack 介绍及初体验
李嘉城的博客
10-31 671
webpack 是一个静态资源打包工具。从图中我们可以看出，webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，输出的文件就是编译好的文件，就可以在浏览器端运行了。开发模式：仅能编译 JS 中的 ES Module 语法生产模式：能编译 JS 中的 ES Module语法，还能压缩 JS 代码。
webpack 打包配置
Hi_ZH的博客
08-17 2439
webpack 打包配置文件 参考资料
webpack配置完全指南
gogo2027的博客
03-01 3324
对于入门选手来讲，webpack 配置项很多很重，如何快速配置一个可用于线上环境的 webpack 就是一件值得思考的事情。其实熟悉 webpack 之后会发现很简单，基础的配置可以分为以下几个方面：entryoutputmoderesolvemodulepluginsource map等，本文就来重点分析下这些部分。较小的输出包体积浏览器中更快的代码执行速度忽略开发中的代码不公开源代码或文件路径易于使用的输出资产浏览器调试工具快速增量编译可加快开发周期运行时提供有用的错误消息。
webpack配置详解
Kotoba209_的博客
05-22 2249
webpack 基础配置总结文件大致结构entry**output****mode****loader****module****Plugins**sourceMapWebpackDevServerBabel处理ES6配置React打包环境多⻚⾯打包通⽤⽅案⽂件监听配置别名 resolve.aliasresolve.extensions配置使⽤静态资源路径publicPath(CDN)压缩css压缩HTMLdevelopment vs Production模式区分打包基于环境变量区分tree Shakin
webpack配置使用（自动打包）
2201_75321887的博客
03-29 499
在书写代码时，我们会发现有些浏览器并不支持某些高级语法，此时我们则需要寻找适配的其他语句，比较麻烦。而这时我们就可以用webpack来使代码自动转化为适配绝大多数浏览器的语句。
webpack配置：压缩打包
Miss_Y0的博客
04-24 1354
对于webpack4不能使用太高版本的CompressionWebpackPlugin组件。
webpack配置及打包操作（保姆级）
weixin_55862915的博客
11-16 399
【保姆级】webpack配置与打包教程
【前端】性能优化——webpack 打包压缩
七镜的博客
02-19 1610
写到这儿，打包压缩的性能优化已经告一段落了，这块其实以前也做过一点，现在也算回顾了一下，接下来可以把一些静态文件（包括js、css、img等等）上传至cdn，来进一步加速，各位友友有其他性能优化的建议，也可以一起交流一波，互相学习学习！
webpack基本使用、配置设置、项目打包
zhoutao2333的博客
09-28 1210
webpack基本的使用、配置设置简单使用以及如何打包项目
webpack处理CSS文件，打包到单独的文件、压缩、以及兼容性处理
jieyucx的博客
06-14 4711
兼容性在以前一直是个比较令大家头疼的事情，尤其是那时候还得兼容IE，webpack肯定是考虑到了这些，实现样式兼容性，我们需要借助几个loader。这就是本章的内容拉，webpack处理css文件打包到单独的文件、压缩、以及兼容性处理。在以前的章节中，我们配置过的生产环境的打包文件，webpack.prod.js。我们去控制台将往速调慢，然后运行打包好的index.html文件。用法很简单，引入，然后在plugin配置对象中添加就可以了。如图，css文件已经被处理成了单独的文件了。文件加载时，会创建一个。
webpack常用配置项
03-25
A：Webpack常用配置项包括： 1. entry：入口文件，用于指定Webpack从哪个文件开始打包。 2. output：输出文件，用于指定Webpack打包后的文件输出位置。 3. mode：打包模式，用于指定是开发模式还是生产模式。 4. resolve：解析模块路径，用于指定Webpack在导入模块时搜索哪些路径。 5. module：模块配置，用于指定Webpack默认使用的模块加载器。 6. plugins：插件配置，用于给Webpack扩展功能，比如生成页面模板、压缩代码等。 7. devServer：开发服务器配置项，用于配置自动刷新、代理服务器等功能。 8. optimization：优化配置项，用于优化打包后的代码，比如去重、压缩等。 9. resolveLoader：解析Loader路径，用于指定Webpack搜索Loader的路径。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值