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. Towelroot v3.0版发布 将支持更多设备 Towelroot v3.0下载

    Towelroot虽然已经发布一段时间了,虽然所Towelroot可以一键ROOT很多设备,虽然它只有100多K.不过还是有一小部分的机型没办法ROOT成功的,也不知道什么原因.不过不用担心,Geoh ...

  2. js比较两个String字符串找出不同,并将不同处高亮显示

    根据java代码改写成js,下边js文件代码: function StringBuffer() { this.__strings__ = []; }; StringBuffer.prototype.a ...

  3. 我对NHibernate的感受(1):对延迟加载方式的误解

    NHibernate是.NET平台上最著名的ORM框架,虽说出身于Java平台上的Hibernate,但是从外部看来这几乎就是一个.NET平台上的原生产品:有自己的社区,有自己的用户,有自己的商业支持 ...

  4. 优化中的subgradient方法

    哎.刚刚submit上paper比較心虚啊.无心学习.还是好好码码文字吧. subgradient介绍 subgradient中文名叫次梯度.和梯度一样,全然能够多放梯度使用.至于为什么叫子梯度,是由 ...

  5. jvm执行流程

    首先给一个简单的Java示例,源代码如下: public class Main { private static int size=1; public static void main(String  ...

  6. Gradle在Windows环境与Linux上配置有哪些不同?

    我的开发环境:Windows + Android Studio + Gradle 2.8 all + Jenkins 公司CI 服务器环境: Linux + Gradle 2.10 bin + Jen ...

  7. PHP 7.0 5.6 下安裝 phpLDAPadmin 发生错误的修正方法

    在稍具規模的網路環境中, 網管時常選用 LDAP 來進行帳號的統整管理, 一方面提供管理便利度, 另一方面使用者也不必因為不同系統而記憶不同帳號, phpLDAPadmin 是一套常見的 LDAP 管 ...

  8. POPSpring动画参数详解

    POPSpring动画参数详解 效果 源码 https://github.com/YouXianMing/Animations // // POPSpringParameterController.m ...

  9. 第七章 JVM性能监控与故障处理工具(1)

    1.定位系统问题 依据 GC日志 堆转储快照(heapdump/hprof文件) 线程快照(threaddump/javacore文件) 运行日志 异常堆栈 分析依据的工具 jps:显示指定系统内的所 ...

  10. Length of Last Word leetocde java

    题目: Given a string s consists of upper/lower-case alphabets and empty space characters ' ', return t ...