Webpack入门配置

发布网友 发布时间：2024-12-22 11:22

我来回答

共1个回答

热心网友 时间：2025-01-16 01:46

本文是关于Webpack入门配置的详细解析，旨在为初学者提供一份学习笔记。如有错误之处，请指正。

Webpack的配置按照功能模块划分，主要包括以下几个方面：

1. Entry: 配置模块的入口。Webpack从这里开始执行构建，搜寻并递归解析所有入口依赖的模块。

1.1 context: Webpack在查找相对路径文件时，会以context为根目录。默认为启动Webpack时的当前目录，也可自定义。

1.2 Entry取值类型: 单个入口使用字符串表示，多入口可为数组或对象形式。单个与数组情况生成一个chunk，对象则根据键名生成多个chunk。入口支持动态配置，以异步函数形式实现。

2. Output: 配置输出代码的规则。

2.1 filename: 配置输出文件名称，字符串类型。单输出时可设静态值，多输出需借助模板与变量，内置变量能帮助区分。

2.2 chunkFilename: 用于异步或动态代码打包，非entry内代码，对应官方文档中的“决定非初始chunk文件名称”。

2.3 path: 配置输出文件的本地路径，URL以HTML为基准。

2.4 publicPath: 配置在线资源的URL前缀。在编译时无法确定publicPath时，可留空，入口文件处使用自由变量__webpack_public_path__，在运行时动态设置。

2.5 crossOriginLoading: 配置异步标签的crossorigin值，可选anonymous或use-credentials。

2.6 libraryTarget和library: 控制库的导出方式与名称。libraryTarget取值包括commonjs、commonjs2等。

2.7 libraryExport: 仅在libraryTarget设置为commonjs或commonjs2时生效，配置要导出的子模块。

3. Module: 配置处理模块的规则。

3.1 rules: 通常用于配置loader，并可使用include或exclude优化搜索效率。

3.2 noParse: 避免解析部分未遵循模块化规范的文件，加快处理速度。

3.3 parser: 配置webpack解析哪些模块规范，忽略哪些。

3.4 resolve: 包括别名、解析器配置等，如alias、mainFields、extensions、modules等。

4. Plugin: 配置扩展功能插件，根据插件特性进行配置。

5. DevServer: 配置开发服务器。

5.1 hot: 启用模块热替换，实现实时预览。

5.2 inline: 开启实时预览功能，依赖代理客户端与网页刷新。

5.3 historyApiFallback: 配置找不到对应路由时返回index.html。

5.4 contentBase: 配置DevServer的文件根目录，一般为项目根目录。

5.5 headers: 在http响应中注入自定义头。

5.6 host: 配置监听地址，支持局域网访问。

5.7 port: 配置监听端口，默认8080，可自定义。

5.8 allowedHosts: 设置允许的HTTP请求Host白名单。

5.9 https: 开启https服务，自动生成证书或使用自定义证书。

5.10 compress: 启用Gzip压缩。

5.11 devServer.open: 在服务器启动后自动打开浏览器。

6. 其他配置项

6.1 target: 配置针对不同环境的代码生成。

6.2 Devtool: 控制生成source map的类型与方式。

6.3 watch和watchOptions: 启动监听文件变化功能，自动重新编译。

6.4 Externals: 告知Webpack忽略使用了哪些外部环境提供的模块，避免打包。

6.5 ResolveLoader: 指定Webpack查找Loader的位置，常用于本地Loader。