Webpack 配置

 我来答
华源网络
2022-08-02 · TA获得超过5594个赞
知道小有建树答主
回答量:2486
采纳率:100%
帮助的人:147万
展开全部

通过 http://[devServer.host]:[devServer.port]/webpack-dev-server 查看 devServer 提供的所有资源列表。
通过 http://[devServer.host]:[devServer.port]/[output.publicPath]/资源名称 来访问对应的资源。
如果提供了 devMiddleware.publicPath ,则通过 http://[devServer.host]:[devServer.port]/[devMiddleware.publicPath]/资源名称 来访问对应的资源,但是通过插件生成的 html 和 css 文件当中所有资源引用的路径仍然使用的是 http://[devServer.host]:[devServer.port]/[output.publicPath]/资源名称 。因此需要保证 output.publicPath 与 devMiddleware.publicPath 一致。

static 设置的是静态资源目录的位置,不是打包生成的文件的存放位置,devServer 打包生成的文件存放在内存中,不存放到硬盘目录。

static.publicPath 设置的是访问静态资源的路径,不是访问打包生成的资源的路径,打包生成的资源路径通过 output.publicPath 访问,静态资源路径访问的是直接存放在静态目录中的静态资源。

配置文件

initial chunk 的文件名

占位符:

non-initial chunk 的文件名,占位符参考 output.filename

设置为 true ,每次打包之前清理 output.path 目录中的所有内容,可以替代 CleanWebpackPlugin 插件。

定义资源存放的位置,例如根据以上的配置文件打包之后生成如下文件:

将 1 2 3 生成的资源都存放到 output.path 目录, dist/app.bundle.js dist/css/app.min.css dist/images/1.jpg

部署的时候,将该目录下的内容复制到服务器对应的目录即可。

定义资源访问的路径

资源访问路径 = output.publicPath + 资源名称

output.publicPath 可以是绝对路径、相对于服务的路径、相对于页面的路径。 不管是哪种路径,都要以 / 结尾

HtmlWebpackPlugin 生成的 index.html 文件:

MiniCssExtractPlugin 生成的 css 文件:

HtmlWebpackPlugin 生成的 index.html 文件:

MiniCssExtractPlugin 生成的 css 文件:

HtmlWebpackPlugin 生成的 index.html 文件:

MiniCssExtractPlugin 生成的 css 文件:

不管通过哪种路径设置 output.publicPath ,都只是影响 HtmlWebpackPlugin 和 MiniCssExtractPlugin 生成的文件中引用其他资源的路径。具体能不能根据资源路径访问到相应的资源,还得正确的部署 output.path 目录到服务器。

在开发模式下,devServer 自动开启一个开发服务器,并且将所有打包生成的资源存储到内存当中,然后通过 http://[devServer.host]:[devServer.port]/[output.publicPath]/资源名称 来访问对应的资源。 这时候 output.publicPath 应该设置为相对服务的路径,例如 / 。

如果你的页面希望在其他不同路径中找到资源文件,则可以通过 devServer 配置中的 devMiddleware.publicPath 选项进行修改。

在生产模式下,推荐将 output.publicPath 设置为绝对路径,然后将 output.path 目录部署与绝对路径对应的服务器中。

配置文件

module.rules 是匹配规则数组,数组中的每一项为一条匹配规则,以下称为 rule。每条 rule 包括匹配条件和匹配结果。

对于依赖图中的每个模块路径,都按照 module.rules 中的 rule 依次进行匹配。如果模块路径满足某个 rule 的匹配条件,则对该模块应用该 rule 的 匹配结果中指定的 loader 进行预处理。? 如果模块路径满足多个 rule 的匹配条件 ?

匹配条件包括 test include exclude 选项,每个选项为一个匹配条件,选项的值可以是:

如果某个 rule 同时有多个匹配条件选项,则模块路径必须同时满足所有的匹配条件,才会对模块应用匹配结果。test 和 include 具有相同的作用,都是必须匹配选项。exclude 是必不匹配选项(优先于 test 和 include)。

最佳实践:

以上配置文件的第二条 rule,如果某个模块不在 ./src/node_modules/ 和 ./src/libs/ 目录下,并且在 ./src/ 目录下,并且模块名以 .js 结尾,则满足该条 rule 的匹配条件。

package.json

webpack.common.js

webpack.prod.js

webpack.dev.js

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式