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-输出的更多相关文章
- Vue+ElementUI项目使用webpack输出MPA
目录 Vue+ElementUI项目使用webpack输出MPA 一. 需求分析 二. 原方案分析 三. 多页面改造3步走 四. 小结 Vue+ElementUI项目使用webpack输出MPA 示例 ...
- Vue+ElementUI项目使用webpack输出MPA【华为云分享】
[摘要] Vue+ElementUI多页面打包改造 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目 ...
- webpack 输出多个文件
http://react-china.org/t/webpack/1870/2 webpack 文章 entry = { "button": "demo/button/i ...
- 跟我一起学习webpack输出动态HTML(三)
跟着之前的项目来 我们没打包一次就会生成一个bundile.js,我们要更新最新的代码不希望有缓存,那么这个时候我们就是更改资源的URL, 每当代码发生变化时,相应的hash也会发生变化.这个时候我们 ...
- webpack(4)-管理输出
设置 HtmlWebpackPlugin html-webpack-plugin:它会用新生成的 index.html文件,替换我们的原有文件 plugins: [ new HtmlWebpackPl ...
- webpack新版本4.12应用九(配置文件之输出(output))
output 位于对象最顶级键(key),包括了一组选项,指示 webpack 如何去输出.以及在哪里输出你的「bundle.asset 和其他你所打包或使用 webpack 载入的任何内容」. ou ...
- Webpack从入门到上线
webpack是目前一个很热门的前端打包工具,官网说得很清楚,webpack的出现就是要把requirejs干掉.同时它还提供了十分便利的本地开发的环境.网上并不容易找到一个讲解得比较详细完整的教程, ...
- webpack 插件: html-webpack-plugin
插件地址:https://www.npmjs.com/package/html-webpack-plugin 这个插件用来简化创建服务于 webpack bundle 的 HTML 文件,尤其是对于在 ...
- webpack htmlWebpackPlugin 静态资源 版本控制
plugins: [ new webpack.optimize.UglifyJsPlugin({ // 压缩webpack 后生成的代码较长时间,通常推到生产环境中才使用 compress:{ war ...
- Webpack模块加载器
一.介绍 Webpack是德国开发者 Tobias Koppers 开发的模块加载器,它能把所有的资源文件(JS.JSX.CSS.CoffeeScript.Less.Sass.Image等)都作为模块 ...
随机推荐
- 关于ubuntu16.04系统无法系统更新的解决
1.提示系统更新升级,报错 /boot空间不足 2.根据网络,为获得/boot 空间,选择删除多余的内核文件 2.1 查询系统当前内核 ~$dpkg --get-selections |grep li ...
- 基于ANGULAR.JS的下一代WEB应用开发-01-yeoman
Angularjs 个人认为这是一款很好的框架!它将我们从AJAX应用的开发中解救了出来!嗯....废话就说道这里下面我们开始把! 首先我们必须了解一些核心的概念: 客户端模版 MVC 数据绑定 依赖 ...
- (转)Nutz | Nutz项目整合Spring实战
http://blog.csdn.net/evan_leung/article/details/54767143 Nutz项目整合Spring实战 前言 Github地址 背景 实现步骤 加入spri ...
- sql中递归查询
with AA as ( select * from tb_ClientBranch_Category where BRANCH_MOM_NAME='北京易华录信息技术股份有限公司' union al ...
- anchor_target_layer层其他部分解读
inds_inside = np.where( (all_anchors[:, 0] >= -self._allowed_border) & (all_anchors[:, 1] > ...
- Perl语言入门:第六章习题:处理用户所指定的名字并汇报相应的姓。
37 print "\n----------------------------------_exercise_6_1--------------------------\n"; ...
- [实现] 利用 Seq2Seq 预测句子后续字词 (Pytorch)
最近有个任务:利用 RNN 进行句子补全,即给定一个不完整的句子,预测其后续的字词.本文使用了 Seq2Seq 模型,输入为5个中文字词,输出为一个中文字词. 目录 关于RNN 语料预处理 搭建数据集 ...
- 通过反编译小程序来学习前端:wxappUnpacker
小程序开发时,会有4种文件:.wxss .json .wxs .wxml. 正式上传到腾讯时,目录会被打包,使用时再发放给客户端. 这个文件包后缀是 .wxapkg.只要手机用过这个小程序,文件 ...
- vue 组件用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- swiper 3D 覆盖流的使用方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...