时间戳

首页 > 解决方案 > Webpack：html和js文件不在同一个文件夹中的项目的output.path、publicPath和chunkFilename选择概念

javascript - Webpack：html和js文件不在同一个文件夹中的项目的output.path、publicPath和chunkFilename选择概念

问题描述

来自 webpack 文档output.publicPath：

简单规则：HTML 页面视图中的 output.path 的 URL。

module.exports = { 
  output: {
    path: path.resolve(__dirname, 'public/assets'),
    publicPath: 'https://cdn.example.com/assets/'   
  } 
};

上述规则适用于单页应用程序，通常index.html和index.js位于同一文件夹中。但是，在多页网站的项目中，通常会创建特殊文件夹，如js或scripts正在创建。所以项目的输出文件夹的文件结构可以是：

在此处输入图像描述

我尝试了很多 和 的组合output.path output.publicPath，output.chunkFilename但仍然不明白如何正确选择上述参数的组合以使动态加载起作用（例如const MODULE = import('./loadOnDemand/testModule')，chunks/chunk__0.js在输出文件夹中）。请告诉我概念，如何选择output.path publicPathand chunkFilename，这将适用于上述文件系统，也可以在以下文件系统上进行缩放：

在此处输入图像描述

标签： javascriptwebpackwebpack-4dynamic-loading

解决方案

您是否尝试过 webpack 魔术注释来自动定位块名称？ https://medium.com/faceyspacey/how-to-use-webpacks-new-magic-comment-feature-with-react-universal-component-ssr-a38fd3e296a

const MODULE = import(/* webpackChunkName: 'test' */'./loadOnDemand/testModule')

推荐阅读