资讯专栏INFORMATION COLUMN

webpack2.x 中文文档 翻译 之 公开路径(pbulic path)

W4n9Hu1 / 2358人阅读

摘要:公开路径该条已在中文网存在点击这里有一个非常有用的设置,允许你设置一个所有资源的基础路径在你的应用中。使用案例这里有有些实际应用中的案例,其中它使用的非常灵活。

公开路径(pbulic path)

该条已在webpack2.x中文网存在,点击这里

webpack有一个非常有用的设置,允许你设置一个所有资源的基础路径在你的应用中。它叫做publicPath

使用案例(Use cases)

这里有有些实际应用中的案例,其中它使用的非常灵活。

在打包生产时设置值 (set value on build time)

在开发时我们通常会有一个assets/文件夹,并且他和index页面处于同级,但是我们想让这些静态资源都在生产时放到cdn吗?

为了解决这个问题,我们仅仅使用一个旧的环境变量。我们有一个变量ASSET_PATH:

import webpack from "webpack";
//无论环境变量是什么,其他使用root
const ASSET_PATH = process.env.ASSET_PATH || "/";

export default{
  output:{
    publicPath:ASSET_PATH
  },

  plugins: [
    
    new webpack.DefinePlugin({
      "precess.env.ASSET_PATH": JSON.stringify(ASSET_PATH)
    })
  ]
};
运行时编译(set value on the fly)

另一个方式设置到on the fly。webpack暴露了全部变量,这允许你做到这些。__webpack_public_path__。所以在你的应用入口,你只需这样做:

__webpack_public_path__ = process.env.ASSET_PATH;

因为我们已经使用了DefinePlugin在我们的设置中,process.env.ASSET_PATH将会一直被定义。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/81862.html

相关文章

  • webpack2.x 中文文档 翻译 出口Output

    摘要:出口影响编译的输出告诉怎样编译输出的文件允许多个入口一个出口的情况。该选项实现跨域加载模块可以的值是命名每个出口文件。不必明确绝对路径。使用设置项,设置具体位置。仅仅命名文件名字即可。 出口Output 影响编译的输出告诉webpack怎样编译输出的文件允许多个入口一个出口的情况。 用法 const config = { output: bundle.js }; module.e...

    weizx 评论0 收藏0
  • webpack2.x 中文文档 翻译 分离库代码Code Splitting - Librari

    摘要:浏览器需要重新下载打包后的文件,即使文件的绝大部分都没有变化。分离并且以来命名新的入口能够缓和当前的问题。现在运行绑定的检查结果是只是被绑定到这个绑定文件中。 分离库代码Code Splitting - Libraries 这个在webpack2.x中文网已存在,点击这里 让我们想一个简单的应用——momentjs,他是一个事件格式化的库。安装moment. npm install -...

    elva 评论0 收藏0
  • webpack2.x 中文文档 翻译 依赖管理 Dependency Management

    摘要:依赖管理该条已在中文网存在,点击这里表达式来调用当你的请求包含表达式,那个一个上下文环境将被创建。一个包含所有父文件夹和子及后代文件夹中以结尾的文件的上下文。一个函数,返回一个数组,包含上下文模块能够处理的所有的请求。 依赖管理 Dependency Management 该条已在webpack2.x中文网存在,点击这里 es6 modules commonjs amd 表达式...

    raledong 评论0 收藏0
  • webpack2.x 中文文档 翻译 开发Development

    摘要:下载完成之后你可以这样启动它如果控制台提醒这个指令无效,可以尝试最好的方法是在中添加命令如下上述命令会使浏览器自动打开到地址。下载完成,如下使用。 开发Development 在这篇中我们将说明怎样开始开发,以及增从三个工具中择一进行开发。假使你已经设置了webpack.config.js设置文件。 该文档已在webpack2.x中存在,点击这里 永远不要再生产产品中使用这些工具,绝对...

    GeekGhc 评论0 收藏0
  • 代码分离-import() webpack2.x 中文文档 翻译

    摘要:代码分离使用中文文档地址点击这里动态导入目前,类函模块加载的语法建议整体交给。在中的是个分离点,用来把被请求的模块独立成一个单独的模块。被替代因为在中使用已经不合建议规范,因此将在版本中启用。 代码分离-使用import() 中文文档地址点击这里 动态导入 目前,类函模import()块加载的语法建议——syntax proposal整体交给ECMAScript。ES2015(es6)...

    jaysun 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<