webpack之输出(Output)
来源:互联网 发布:amarra windows 编辑:程序博客网 时间:2024/06/02 03:11
将所有的资源(assets)归拢在一起后,还需要告诉 webpack 在哪里打包应用程序。webpack 的 output
属性描述了如何处理归拢在一起的代码(bundled code)。
输出(Output):配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。注意,即使可以存在多个入口起点,但只指定一个输出配置。
一.用法
a.filename 用于输出文件的文件名。b.目标输出目录 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)来确保每个文件具有唯一的名称。
webpack.config.js:const config = {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
// 剩余的应用程序入口
四.output属性“path” Vs “publicPath”
output告诉Webpack应该在哪里以怎样的方式去放置打包好的文件。它有两个属性:“path”和“publicPath”。
“path”会简单地告诉Webpack生成文件输出位置。“publicPath”多被一些Webpack的插件使用,在HTML文件以生产环境方式被构建的时候,更新CSS文件内的URL地址。
举个栗子,在你的CSS文件里面,你可能会在URL里面加载./test.png。但是在生产环境中,test.png很可能放在CDN内——比如当你的node.js服务器运行在Heroku的时候。这意味着,你可能在生产环境内不得不手动更新文件内的URL指向。
相反,你可以使用Webpack的publicPath以及其他适用于这个属性的插件在生产环境中自动地更新文件内部的URL指向。
- webpack之输出(Output)
- Webpack之输出(Output)学习笔记(3)
- webpack之旅03-output
- Webpack基础之输出
- webpack中output配置
- webpack 出口 Output
- codeigniter源代码分析之输出类 Output.php
- Output Filters输出过滤器
- 控制输出java_control-output
- angular4输出属性@Output
- 【webpack】entry 和output的详细介绍
- webpack配置的entry和output new
- webpack--概念3--输出
- 输出信息到output窗口
- 样式输出(Styling output)
- Output reverse number输出反序
- 浅谈HTML5输出标签<output>
- PHP 输出缓存 Output Buffer
- 树莓派3b实现多个功能模块同时运行入门(C语言多线程)
- 根据list<object>对象中某个字段去除重复值
- Android图片加载框架最全解析(一),Glide的基本用法
- 剑指offer/合并两个排序的链表
- 人工智能时代码农转行新选择!
- webpack之输出(Output)
- golang new和make学习笔记
- 247
- wireshark 基本用法及过虑规则参考
- 生成二维码、自定义二维码
- vimの 命令行模式
- leetcode解题方案--001--TwoSum
- hibernate基础学习
- Linux设置环境变量