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 继续上一遍的配置,本节主要记录 ...
随机推荐
- OBD-II Protocol -- SAE J1850 VPW PWM
http://www.auto-diagnostics.info/j1850 j1850 The SAE J1850 bus bus is used for diagnostics and data ...
- Asp.net处理程序(第六篇)
四.Web服务处理程序 对于Web服务来说,标准的方式是使用SOAP协议,在SOAP中,请求和回应的数据通过XML格式进行描述.在Asp.net 4.0下,对于Web服务来说,还可以选择支持Ajax访 ...
- Extjs DateField onchange
1 开发思路: 在日期值变化的事件中获得选择后的日期值,传给后台,然后从后台加载相应的数据 2 问题:在查看extjs2.2 的api的官方说明文档,文档对datefield组件的change事件说明 ...
- 【docker】elasticsearch-head无法连接elasticsearch的原因和解决,集群健康值:未连接,ElasticSearch——跨域访问的问题
环境 ==================== 虚拟机启动 centos 7 ip:192.168.92.130 elasticsearch 5.6.9 port:9200 9201 elas ...
- 80x86 CPU 的工作模式
8086/8088微处理器只有一种工作模式:实地址模式. 32为的80x86微处理器有3种工作模式:实地址模式.保护模式和虚拟8086模式. 实地址模式 对于8086/8088微处理器,实模式是它 ...
- pytest文档28-重复执行用例(pytest-repeat)
前言 平常在做功能测试的时候,经常会遇到某个模块不稳定,偶然会出现一些bug,对于这种问题我们会针对此用例反复执行多次,最终复现出问题来. 自动化运行用例时候,也会出现偶然的bug,可以针对单个用例, ...
- coco游戏android.mk
LOCAL_PATH := $(call my-dir) include $(CLEAR_VARS) LOCAL_MODULE := game_shared LOCAL_MODULE_FILENAME ...
- XCL-Charts画曲线图(CurveChart) 例2
还有一个横向的曲线图(CurveChart) 效果: 代码: //图基类 chart = new CurveChart(); //图所占范围大小 chart.setChartRange(0, 0, t ...
- git 经常使用操作集锦
创建仓库 新建普通仓库: jxdong@ubuntu-server:~/workspace/git$ git init Reinitialized existing Git repository in ...
- 用户组篇endgrent getpw getuid
endgrent(关闭组文件) 相关函数 getgrent,setgrent 表头文件 #include<grp.h> #include<sys/types.h> 定义函数 v ...