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. pig—WordCount analysis

    grunt> cat /opt/dataset/input.txt keyword1 keyword2 keyword2 keyword4 keyword3 keyword1 keyword4 ...

  2. python定位性能的工具

    参考: http://www.ibm.com/developerworks/cn/linux/l-cn-python-optim/ http://xianglong.me/article/analys ...

  3. c#中何时使用Empty()和DefalutIfEmpty()

    在项目中,当我们想获取IEnumerable<T>集合的时候,这个集合有可能是null.但通常的做法是返回一个空的集合. 假设有这样一个场景:当商店不营业时,返回一个空的IEnumerab ...

  4. SpringMVC和Springboot的区别(网摘)

    spring boot 我理解就是把 spring spring mvc spring data jpa 等等的一些常用的常用的基础框架组合起来,提供默认的配置,然后提供可插拔的设计,就是各种 sta ...

  5. FT项目开发技术点(四)

    1.jsp页面form传递过来的值是在后台ishi通过name获得的而非ID.上传文字要用input type=text属性 <tr> <th>品牌:</th> & ...

  6. FitLayout

    <HTML> <HEAD> <TITLE>布局</TITLE> <link rel="stylesheet" type=&qu ...

  7. EasyUI Pagination 分页的两种做法

    EasyUI 的 datagrid 支持服务器端分页,但是官方的资料比较少,以下总结了两种 datagrid 的服务器端分页机制,可根据情况具体使用. 一:使用 datagrid 默认机制 后台: p ...

  8. sizeof, strlen区别

    strlen与sizeof的区别 .sizeof操作符的结果类型是size_t,它在头文件中typedef为unsigned int类型. 该类型保证能容纳实现所建立的最大对象的字节大小. .size ...

  9. uva 1025 A Spy in the Metro 解题报告

    A Spy in the Metro Time Limit: 3000MS     64bit IO Format: %lld & %llu Submit Status uDebug Secr ...

  10. cmake函数參数解析

    近期在迁移公司的make系统到cmake上.发现cmake的function參数非常奇怪.比如,假设我们向一个function传递list作为參数,在function中,形參会变成例如以下状况: se ...