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配置上线地址的更多相关文章

  1. 如何扩展 Create React App 的 Webpack 配置

    如何扩展 Create React App 的 Webpack 配置  原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...

  2. webpack+vue-cil 中proxyTable配置接口地址代理

    webpack+vue-cil 中proxyTable配置接口地址代理 在项目开发的时候,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们现在使用vue-cli进行项目打包 ...

  3. webpack+vue-cli中proxyTable配置接口地址代理详细解释

    在vue-cli项目中config目录里面的index.js配置接口地址代理,详细解释如下图所示:

  4. Webpack配置示例和详细说明

    /* * 请使用最新版本nodejs * 默认配置,是按生产环境的要求设置,也就是使用 webpack -p 命令就可以生成正式上线版本. * 也可以使用 webpack -d -w 命令,生成用于开 ...

  5. vue-cli#2.0 webpack 配置分析

    目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-s ...

  6. vue-cli中webpack配置详解

    vue-cli是构建vue单页应用的脚手架,命令行输入vue init <template-name> <project-name>从而自动生成的项目模板,比较常用的模板有we ...

  7. vue-cli webpack配置 简单分析

    vue-cli webpack配置分析 入口 从package.json可以看到开发和生产环境的入口. "scripts": { "dev": "no ...

  8. webpack配置这一篇就够

    最近看了一篇好文,根据这个文章重新梳理了一遍webpack打包过程,以前的一些问题也都清楚了,在这里分享一下,同时自己也做了一些小的调整 原文链接:http://www.jianshu.com/p/4 ...

  9. 前端工程化(二)---webpack配置

    导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord 继续上一遍的配置,本节主要记录 ...

随机推荐

  1. 虚拟信用卡 全球付, 工商银行国际E卡, Bancore, Entropay, Payoneer

    虚拟信用卡 海外网购.购买国外域名空间.ebay等一些国外网站账号的激活这些情况都需要用到国际信用卡, 如果没有信用卡或者有信用卡但是对于安全性有所顾虑怎么办? 其实有一种东西叫做虚拟信用卡,正规银行 ...

  2. Pig系统分析(5)-从Logical Plan到Physical Plan

    Physical Plan生成过程 优化后的逻辑运行计划被LogToPhyTranslationVisitor处理,生成物理运行计划. 这是一个经典的Vistor设计模式应用场景. 当中,LogToP ...

  3. @selector 如何调用在另一个类中的静态函数?

    可以在同一个类的methodName这个函数中再调用另一个类中的静态方法

  4. mysql批量insert速度超慢

    在进行大批量数据insert的时候,我使用的是hibernate的进行save,而数据库采用mysql.但是在save的时候,速度很慢.         刚开始以为是MYSQL进行DNS解析的问题,于 ...

  5. CALayer(持续更新)

    CALayer The CALayer class manages image-based content and allows you to perform animations on that c ...

  6. C#中的托管与非托管

    在.net 编程环境中,系统的资源分为托管资源和非托管资源. 字面理解托管,就是托付个别人管理,要的是结果,具体怎么完成的我并不关心,就像某些'牛逼'的老板“我只要结果”那样. 在.NET FRAME ...

  7. UTF-8,Unicode,GBK,希腊字母读法,ASCII码表,HTTP错误码,URL编码表,HTML特殊字符,汉字编码简明对照表

    UNICODE,GBK,UTF-8区别 UNICODE,GBK,UTF-8区别    简单来说,unicode,gbk和大五码就是编码的值,而utf-8,uft-16之类就是这个值的表现形式.而前面那 ...

  8. ubuntu 安装 mongodb 数据库

    第一步:下载安装包 下载版本:3.0.1 下载链接:http://www.mongodb.org/downloads 首先在linux中解压缩安装程序 通过命令操作: 解压:[root@localho ...

  9. iOS:UIToolBar、toolbarItems、BarButtonItem的几种关系

    工具栏:ToolBar 工具栏项目:Bar Button Item 调节按钮位置的固定调节:Fixed Space Bar Button Item 调节按钮位置的灵活调节:Flexible Space ...

  10. 使用Topshelf 5步创建Windows 服务

    使用Topshelf创建Windows 服务简要的介绍了创建Windows服务的另一种方法,老外的一篇文章Create a .NET Windows Service in 5 steps with T ...