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. 使用 C++ 的 StringBuilder 提升 4350% 的性能

    http://blog.jobbole.com/109663/?utm_source=blog.jobbole.com&utm_medium=relatedPosts http://msdn. ...

  2. Vue2.1.7源码学习

    原本文章的名字叫做<源码解析>,不过后来想想,还是用“源码学习”来的合适一点,在没有彻底掌握源码中的每一个字母之前,“解析”就有点标题党了.建议在看这篇文章之前,最好打开2.1.7的源码对 ...

  3. 平时常用的Visual Studio操作技巧,持续更新中……

    移除未使用的命名空间--方法1:右键--"组织using"--"移除未使用的using"--方法2:Shift+F10--"O"-" ...

  4. MySQL 5.5版本解决中文乱码问题时my.ini内[mysqld]项中不能再写default-character-set=utf8

    来看看如何解决乱码问题: 在mysql中默认字符集是latin1, 想要设置字符集为uft-8,可以在 my.cnf 文件中添加以下设置: [client] default-character-set ...

  5. 【笨木头Lua专栏】基础补充05:迭代器番外篇

    关于迭代器的内容, 另一点点,只是已经无关紧要了.应该算是一种扩展吧.就一起来开开眼界好了~ 笨木头花心贡献.哈?花心?不.是用心~ 转载请注明,原文地址: http://www.benmutou.c ...

  6. MySQL Workbench update语句错误Error Code: 1175.

    rom:http://www.tuicool.com/articles/NJ3QRz MySQL update error: Error Code: 1175. You are using safe ...

  7. jstl 处理字符串函数 substring spli等

    在jstl中的fn标签也是我们在网页设计中经常要用到的很关键的标签,在使用的时候要先加上头 <%@ taglib uri="http://java.sun.com/jsp/jstl/f ...

  8. SQL_DDL_建库建表

    --IF DB_ID('testdb') IS NULL --CREATE DATABASE testdb USE master GO IF EXISTS ( SELECT * FROM sys.da ...

  9. Json解析教程(四.FastJson 的使用)

    简介 Fastjson是一个Java语言编写的高性能功能完善的JSON库. 高性能 fastjson采用独创的算法,将parse的速度提升到极致,超过所有json库,包括曾经号称最快的jackson. ...

  10. 如何获取隔壁wifi密码,非暴力破解

    目前常见的Wi-Fi加密方式有WEP.WPA2和WPS(链接为各自的破解方式),不过有网友反映以往破解WPA2的方法耗时太长,而且不适用于所有WPS启动的接入点.而今天介绍的这种方法则更加省时省力. ...