webpack配置上线地址
webpack配置上线地址主要使用output配置项下的publicPath。
webpack.config.js配置文件为:
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//打包入口
entry: {
main: './src/js/main.js',
a: './src/js/a.js'
},
//打包后的文件
output: {
//不加__dirname 会报错
path: __dirname + '/dist',
//注意:使用[name]确保每个文件名都不重复
filename: 'js/[name]-[chunkhash].js',
//线上地址配置
publicPath:'http://cdn.com/'
},
plugins: [
new htmlWebpackPlugin({
template: 'index.html',
filename: 'index-[hash].html',
title: 'test parameter'
})
]
}
执行命令:
npm run webpack
效果:
(1)项目目录输出结构:
(2)html 引用地址为线上地址:
webpack配置上线地址的更多相关文章
- 如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置 原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...
- webpack+vue-cil 中proxyTable配置接口地址代理
webpack+vue-cil 中proxyTable配置接口地址代理 在项目开发的时候,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们现在使用vue-cli进行项目打包 ...
- webpack+vue-cli中proxyTable配置接口地址代理详细解释
在vue-cli项目中config目录里面的index.js配置接口地址代理,详细解释如下图所示:
- Webpack配置示例和详细说明
/* * 请使用最新版本nodejs * 默认配置,是按生产环境的要求设置,也就是使用 webpack -p 命令就可以生成正式上线版本. * 也可以使用 webpack -d -w 命令,生成用于开 ...
- vue-cli#2.0 webpack 配置分析
目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-s ...
- vue-cli中webpack配置详解
vue-cli是构建vue单页应用的脚手架,命令行输入vue init <template-name> <project-name>从而自动生成的项目模板,比较常用的模板有we ...
- vue-cli webpack配置 简单分析
vue-cli webpack配置分析 入口 从package.json可以看到开发和生产环境的入口. "scripts": { "dev": "no ...
- webpack配置这一篇就够
最近看了一篇好文,根据这个文章重新梳理了一遍webpack打包过程,以前的一些问题也都清楚了,在这里分享一下,同时自己也做了一些小的调整 原文链接:http://www.jianshu.com/p/4 ...
- 前端工程化(二)---webpack配置
导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord 继续上一遍的配置,本节主要记录 ...
随机推荐
- win7 系统盘怎样瘦身! 可整理出4-5G。
1.移走虚拟内存文件到非系统盘 大家都知道,为了加快系统的执行,Windows提供了虚拟内存机制,而在Windows7中,默认是开启这项功能的,并且虚拟内存文件在系统盘.比方一台2G内存的机器,虚拟内 ...
- clip-path 教程:使用 CSS 中的 clip-path 轻松实现多边形
作为一个前端开发,一个主要的工作就是来实现设计师设计的UI界面.而在UI界面中,各种各样的形状元素应用则是随处可见,比如三角形: 以前碰到这种形状的时候,会使用各种黑科技的技巧,比如使用CSS中的bo ...
- python定位性能的工具
参考: http://www.ibm.com/developerworks/cn/linux/l-cn-python-optim/ http://xianglong.me/article/analys ...
- .Net异步编程 z
1. 引言 最近在学习Abp框架,发现Abp框架的很多Api都提供了同步异步两种写法.异步编程说起来,大家可能都会说异步编程性能好.但好在哪里,引入了什么问题,以及如何使用,想必也未必能答的上来. 自 ...
- [翻译] FlatUIKit
FlatUIKit FlatUIKit is a collection of iOS components styled with the "Flat UI" aesthetic ...
- spring开发文档收集
http://docs.spring.io/spring/docs/4.2.1.BUILD-SNAPSHOT/spring-framework-reference/htmlsingle/#aop-at ...
- AES算法工具类
什么是对称加密算法? AES已经变成目前对称加密中最流行算法之一:AES可以使用128.192.和256位密钥,并且用128位分组加密和解密数据. 对称加密算法安全吗? 看过间谍局的知友们一定知道电台 ...
- “==”和equals之间的区别
通俗点讲,==是看看左右是不是一个东西.equals是看看左右是不是长得一样.如果单纯是想记住,==:等于.equals:相同.两个长得一样的人,只能说长的相同(equals),但是不等于他们俩是一个 ...
- 织梦(Dedecms) V5.6 plus/carbuyaction.php 本地文件包含漏洞
漏洞版本: DedeCmsV5.6 漏洞描述: DedeCMS内容管理系统软件采用XML名字空间风格核心模板:模板全部使用文件形式保存,对用户设计模板.网站升级转移均提供很大的便利,健壮的模板标签为站 ...
- Linux文件实时同步,可实现一对多
说明:该功能服务端安装sersync2,客户端安装rsync,原理就是服务端主动推送设定目录下的所有更新的文件到各个客户端rsync接收. rsync大家都知道,是Linux自带的数据同步工具,而se ...