分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

webpack-输出

发布时间:2023-09-06 01:43责任编辑:彭小芳关键词:webpack

输出(Output)

配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。

注意,即使可以存在多个入口起点,但只指定一个输出配置。

用法(Usage)

在 webpack 中配置 output 属性的最低要求是,将它的值设置为一个对象,包括以下两点:

  • filename 用于输出文件的文件名。
  • 目标输出目录 path 的绝对路径。

webpack.config.js

const config = { ?output: { ???filename: ‘bundle.js‘, ???path: ‘/home/proj/public/assets‘ ?}};module.exports = config;

此配置将一个单独的 bundle.js 文件输出到 /home/proj/public/assets 目录中。

多个入口起点

如果配置创建了多个单独的 "chunk"(例如,使用多个入口起点或使用像 CommonsChunkPlugin 这样的插件),则应该使用占位符(substitutions)来确保每个文件具有唯一的名称。

{ ?entry: { ???app: ‘./src/app.js‘, ???search: ‘./src/search.js‘ ?}, ?output: { ???filename: ‘[name].js‘, ???path: __dirname + ‘/dist‘ ?}}// 写入到硬盘:./dist/app.js, ./dist/search.js

高级进阶

以下是使用 CDN 和资源 hash 的复杂示例:

config.js

output: { ?path: "/home/proj/cdn/assets/[hash]", ?publicPath: "http://cdn.example.com/assets/[hash]/"}

在编译时不知道最终输出文件的 publicPath 的情况下,publicPath 可以留空,并且在入口起点文件运行时动态设置。

如果你在编译时不知道 publicPath,你可以先忽略它,并且在入口起点设置 __webpack_public_path__

__webpack_public_path__ = myRuntimePublicPath
__webpack_public_path__ = myRuntimePublicPath// 剩余的应用程序入口

webpack-输出

原文地址:https://www.cnblogs.com/cisum/p/8474711.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved