附源码:http://files.cnblogs.com/files/chenshao/startPublic.rar

  1. 'use strict';
  2. var webpack = require('webpack');
  3. var path = require('path');
  4.  
  5. //CLI:webpack-dev-server --content-base public
  6.  
  7. module.exports = {
  8. entry: path.join(__dirname,"src","entry.js"),
  9. output: {
  10. /*
  11. webpack-dev-server环境下,path、publicPath、--content-base 区别与联系
  12. path:指定编译目录而已(/build/js/),不能用于html中的js引用。
  13. publicPath:虚拟目录,自动指向path编译目录(/assets/ => /build/js/)。html中引用js文件时,必须引用此虚拟路径(但实际上引用的是内存中的文件,既不是/build/js/也不是/assets/)。
  14. --content-base:必须指向应用根目录(即index.html所在目录),与上面两个配置项毫无关联。
  15. ===================================================
  16. 发布至生产环境:
  17. 1.webpack进行编译(当然是编译到/build/js/)
  18. 2.把编译目录(/build/js/)下的文件,全部复制到/assets/目录下(注意:不是去修改index.html中引用bundle.js的路径)
  19. */
  20. path: path.join(__dirname,"build","js"),
  21. publicPath: "/assets/",
  22. //publicPath: "http://cdn.com/assets/",//你也可以加上完整的url,效果与上面一致(不需要修改index.html中引用bundle.js的路径,但发布生产环境时,需要使用插件才能批量修改引用地址为cdn地址)。
  23. filename: 'bundle.js'
  24. }
  25. };

[webpack]path、publicPath、--content-base 理解的更多相关文章

  1. webpack 配置 publicPath的理解

    在学习webpack的时候,配置文件中有一个publicPath属性,一直不是很明白它到底是怎么用,也查了很多资料,得到最多的说法是当打包的时候,webpack会在静态文件路径前面添加publicPa ...

  2. webpack output的path publicPath

    path是用来定义入口文件保存的地址,而publicPath是定义非入口文件需要抽离保存的第三方文件的保存地址 vue-cli 中HtmlWebpackPlugin生成html,都会存在path路径上 ...

  3. webpack output.publicPath

    output.publicPath string function 对于按需加载(on-demand-load)或加载外部资源(external resources)(如图片.文件等)来说,outpu ...

  4. Webpack中publicPath设置

    webpack中的path是当我们build的时候,输出项目打包文件的位置. webpack中的publicPath是我们打算放到web服务器下的目录,如果我们要放到网站的根目录下,那么就无需设置.如 ...

  5. Webpack 2 视频教程 014 - 深入理解 Webpack 2 中的 loader

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  6. webpack 模块热替换的理解和使用

    模块热替换(webpack文档上也叫 Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一.它允许在运行时更新各种模块,而无需进行完全刷新. 这句话其实 ...

  7. 关于content的理解

    Context字面意思上下文,位于framework packageandroid.content.Context中,其实该类为long型,类似Win32中的Handle句柄,很多方法需要通过 Con ...

  8. 深入理解webpack基本配置(一)

    1. 安装webpack到全局 在学习构建之前,我们来在本地文件新建一个存放项目的文件夹,比如叫demo1这个项目,然后进入demo1该项目的根目录后,执行命令 npm init运行下,一路回车(先简 ...

  9. vue --- 脚手架初始化项目中配置文件webpack.base.conf.js代码含义

    'use strict' //引入node path 中间件 可以获取到 path 路径的一些信息 const path = require('path') //引入utils工具模块 utils主要 ...

随机推荐

  1. b4和tncl_extract_UNCL_new

    # -*- coding:utf-8 -*- import re ''' 适应新版本 注意: 1)17A文件改完后缀后,需要转为UTF-8无BOM格式,才能正确处理. 2)fr = open(file ...

  2. ansible-playbook api 2.0 运行项目

    上篇 api 的文章 <ansible-playbook api 2.0 直接运行> 介绍的是直接将 tasks 直接写在 代码中的,本文介绍 api 运行整个项目 [root@10_1_ ...

  3. python编码(二)

    谈谈Unicode编码,简要解释UCS.UTF.BMP.BOM等名词 问题一 使用Windows记事本的“另存为”,可以在GBK.Unicode.Unicode big endian和UTF-8这几种 ...

  4. 百度离线地图,web

    1.首先获取百度 JavaScript API 首先用浏览器打开 http://api.map.baidu.com/api?v=1.3 其中 http://api.map.baidu.com/gets ...

  5. WinRT 中后台任务类的声明

    要实现后台任务,需要实现IBackgroundTask接口 public sealed class SimpleTask : IBackgroundTask { public void Run(IBa ...

  6. mongodb 命令行安装

    因为下载zip的文件速度快,所以就使用了zip,zip格式的解压完后需要使用命令行安装,步骤大致如下: 1,首先创建一个文件叫mongo的文件,里面包含了数据库存放的目录以及日志,然后在指定的目录下创 ...

  7. 基于Quartz.net的远程任务管理系统 一

    在上一篇绪中,已经介绍了整个项目的情况下了,接下来就是开始一步步做起来了. 首先:先整个我们的Job任务表,以及Job执行日志表.SQL如下: drop table if exists job_inf ...

  8. Basic Auth

    开放平台 把网站服务封装成一系列接口供第三方开发者使用,这种行为就叫做Open API,提供开放API的平台本身就被称为开放平台.比如一些网站支持QQ登录,那QQ就相当于开放平台,QQ提供了一些OPE ...

  9. C#操作字符串之常用函数总结

    1:使用string.Join 泛型集合快速转换拼接字符串. 2:使用 string.Split 将字符串截断转换成字符数组. 3:使用 string.Substring,string.Remove ...

  10. requirejs的插件介绍与制作

    本文由作者郑海波授权网易云社区发布. 前言 我这里就不介绍requirejs了, 简而言之: requirejs是支持AMD规范的模块加载器, 事实上它也是AMD的最直接推动者. 现在可供挑选的开源模 ...