webpack-输出
2024-09-30 19:24:52
输出(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 // 剩余的应用程序入口
最新文章
- Spring MVC 读取静态资源时404错误
- for update造成的Oracle锁表与解锁
- linux多线程编程(转)
- UITableViewCell 左滑删除
- Python学习笔记 (3) :列表、元组的操作
- table排名次
- web 服务器、PHP、数据库、浏览器是如何实现动态网站的
- 更新mysql驱动5.1-47 Generated keys not requested. You need to specify Statement.RETURN_GENERATED_KEY
- gson常用的方式
- 【转载】阿里云ECS Linux服务器禁止某些IP访问
- axios的增删改查。
- C# 实现身份验证之WCF篇(1)
- JavaScript 格式化数字 - 转
- 远程批量获取Linux和Windos操作系统版本(内核)
- [Umbraco] xslt语言介绍及与umbraco的关系
- Null和undefined的区别?
- 利用JS实现一个简单的二级联动菜单
- Kotlin语言学习笔记(4)
- MySQL通过视图(或临时表)实现动态SQL(游标)
- XML---Studying
热门文章
- laravel socialite微信登录注意
- laravel 只有/login路由403,如何解决
- jQuery 开始动画,停止动画
- CAD参数绘制多行文字(com接口)
- vue面试相关
- chomp成功的返回值是1,chomp对参数去回车符后会改变参数的值,是传入又是传出参数。$arrow_notation = ( chomp( $unpackeing = <;STDIN>;) );
- GRPC在NET上的应用
- C#基础学习(二)
- (十一)python3 encode()和decode()
- 选项B中:int b[][3]={0,1,2,3}