Webpack 常见配置项

server/2024/9/24 8:18:07/

1. entry

指定一个或多个入口点,Webpack 从这里开始构建依赖图。

entry: {main: './src/index.js',admin: './src/admin.js'
}

2. output

指定输出文件的路径和名称。

output: {filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist'),publicPath: '/assets/' // 用于生成的资源 URL
}

3. module

配置如何处理不同类型的模块。

module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader'}},{test: /\.css$/,use: ['style-loader', 'css-loader']},{test: /\.(png|jpe?g|gif)$/i,use: [{loader: 'file-loader',options: {outputPath: 'images'}}]}]
}

4. resolve

配置模块解析规则,例如别名、扩展名等。

resolve: {extensions: ['.js', '.json', '.jsx'],alias: {'@': path.resolve(__dirname, 'src')}
}

5. plugins

配置插件,用于执行更复杂的任务,如优化、压缩、生成 HTML 文件等。

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');plugins: [new HtmlWebpackPlugin({template: './src/index.html'}),new MiniCssExtractPlugin({filename: '[name].css'})
]

6. optimization

配置优化选项,如代码分割、懒加载、Tree Shaking 等。

optimization: {splitChunks: {chunks: 'all',minSize: 10000,maxSize: 0,minChunks: 1,maxAsyncRequests: 10,maxInitialRequests: 5,automaticNameDelimiter: '~',name: true,cacheGroups: {vendors: {test: /[\\/]node_modules[\\/]/,priority: -10,filename: 'vendors~[name].js'},default: {minChunks: 2,priority: -20,reuseExistingChunk: true,filename: 'common~[name].js'}}},usedExports: true, // 启用 Tree Shakingminimize: true, // 启用压缩minimizer: [new TerserPlugin()] // 使用 TerserPlugin 进行压缩
}

7. devServer

配置开发服务器,用于热重载、实时重新加载等。

devServer: {contentBase: path.join(__dirname, 'dist'), // 指定开发服务器提供静态文件的目录compress: true, // 启用 gzip 压缩port: 9000, // 指定开发服务器监听的端口号hot: true, // 启用热模块替换(Hot Module Replacement, HMR)open: true // 启动开发服务器后自动打开浏览器
}

8. mode

设置构建模式,development 或 production。

mode: 'production'

9. externals

排除某些模块,使其不在打包结果中,通常用于全局变量或 CDN 引入的库。

externals: {jquery: 'jQuery'
}

10. performance

配置性能提示,例如文件大小限制等。

performance: {hints: 'warning', // 可以是 'error' 或 'warning'maxAssetSize: 200000, // 单个文件的最大体积(字节)maxEntrypointSize: 400000, // 入口点的最大体积(字节)assetFilter: assetFilename => !/(\.map$)/.test(assetFilename) // 过滤文件
}

11. stats

配置构建输出的详细程度。

stats: 'errors-only' // 只显示错误信息

12. target

指定打包的目标环境,如 web、node 等。

target: 'web'

13. devtool

配置源映射(source map),用于调试。

devtool: 'source-map'

http://www.ppmy.cn/server/121252.html

相关文章

通过深度学习识别情绪

通过深度学习识别情绪(Emotion Recognition using Deep Learning)是一项结合多模态数据的技术,旨在通过分析人类的面部表情、语音语调、文本内容等特征来自动识别情绪状态。情绪识别在人机交互、健康监测、教育、娱乐等领域具有广泛的应用。 …

共享行业使用第三方支付分账系统优势

在共享行业中,选择最适合的分账模式需要考虑多个因素,包括安全性、透明度、灵活性、合规性以及成本效益等。以下是对几种常见分账模式的简要评估: 银行分账系统: 优点:信誉高、安全性好、资金可追踪性强。 缺点&…

【机器学习】——支持向量机

文章目录 支持向量机(Support Vector Machine, SVM)概述SVM 的工作原理线性不可分数据:软间隔与核技巧SVM 的数学形式SVM 的优势SVM 的缺点SVM 的应用 支持向量机(Support Vector Machine, SVM)概述 支持向量机&#…

自学前端的正确姿势是...

师傅带进门,修行在个人。 在前端自学成才的道路上,有些人走的很快,有些人却举步维艰。 为什么会这样子呢?因为他们没有掌握自学前端的正确姿势。 在介绍应该要怎样自学前端之前,首先来看下,自学前端容易…

Android平台Unity3D下如何同时播放多路RTMP|RTSP流?

技术背景 好多开发者,提到希望在Unity的Android头显终端,播放2路以上RTMP或RTSP流,在设备性能一般的情况下,对Unity下的RTMP|RTSP播放器提出了更高的要求。实际上,我们在前几年发布Unity下直播播放模块的时候&#xf…

MATLAB算法实战应用案例精讲-【大模型】GAIA

目录 前言 知识储备 10大开源大模型 LLaMA 3 Phi-3 BLOOM BERT Falcon 180B XGen-7B GPT-NeoX 和 GPT-J Vicuna13-B 如何选择适合的开源LLM 算法原理 性能 大模型如何量化 什么是量化,为什么需要它? 量化是如何工作的?简单的数学推导 LLM权重参数进行量化和…

2023年06月中国电子学会青少年软件编程(Python)等级考试试卷(二级)答案 + 解析

青少年软件编程(Python)等级考试试卷(二级) 一、单选题(共25题,共50分) 1. 运行以下程序,如果通过键盘先后输入的数是1和3,输出的结果是?( ) a=int(input()) b=int(input()) if a < b: a=b print(a) A. 3 1 B. 1 3 C. 1 D. 3 正确答案:D 答案解析&am…

css允许换行,且换行超出后省略号隐藏

在这里插入代码片.ellipsis-style { width: 200px; /* 设置一个固定宽度&#xff0c;以便触发省略号效果 / display: -webkit-box; -webkit-line-clamp: 3; / 设置显示的行数&#xff0c;这里是 3 行 */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellip…