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. CentOS的update-grub2命令

    这个和Ubuntu还是有些区别,在CentOS修改成如下: grub2-mkconfig -o /boot/grub2/grub.cfg

  2. 使用邮件和RSS两种方式,订阅博客更新通知

    分类: 系统运维 点击订阅按钮,可以订阅本博客的更新 输入您的邮件地址,可以订阅本博客的更新通知,及时了解最新内容 使用RSS,订阅-马二进三名人传记-博客 也许大家是第一次听到RSS这个概念,那什么 ...

  3. QQclient团队博客

    Windows 8 视频採集  http://impd.tencent.com/?p=25 句柄泄漏检測工具的实现原理 http://impd.tencent.com/?p=29

  4. OPC and .NET

    Note: recent OPC standards, including Unified Architecture (UA) and Express Interface (Xi) were desi ...

  5. Introducing .NET Core

    At connect(), we announced that .NET Core will be entirely released as open source software. I also ...

  6. datagrid在MVC中的运用07-实现Master-Detail(使用PartialView)

    本文主要体验用jQuery Easyui的datagrid来实现Master-Detail主次表.谢谢Kevin的博文,助我打开了思路. 主表显示所有的Category,当点击主表的展开按钮,显示该C ...

  7. 字符串变量作mysql查询条件

    原文:http://blog.csdn.net/qing_gee/article/details/41646503 当你的查询条件是一个字符串变量时,你该怎么办,比如字符串可能是“0001ME,000 ...

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

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

  9. 使用 UIFontWDCustomLoader 载入自定义字体

    UIFontWDCustomLoader https://github.com/daktales/UIFontWDCustomLoader You can use UIFontWDCustomLoad ...

  10. C++“窗体”程序设计启蒙(之二)

    [摘要]本文适合已经完整学习了C++面向对象机制,但在开发窗体程序方面还是零基础的同学.通过本文的引导进行实践体验,目的是消除同学们开发窗体程序的神奇感,为下一步的自学找到感觉.同一时候,能更深入地体 ...