我发现了很多使用webpack构建/打包的 Web 应用程序示例。全部使用<base href="/">之类的。

对于 Web 应用程序，我首选的方式是不使用基础，而是定位与 index.html 相关的所有资源。这在开发在 WebView 中运行的类似 PhoneGap 的 Web 应用程序时尤其重要。

当然，我不想仅仅因为有人决定将应用程序移动到另一个地方而运行构建脚本。

是否有可靠的解决方案可以避免<base href="/">？

我有以下结构

目前我使用 HtmlWebpackPlugin 将 angular 文件夹添加到应用程序中。现在我想要一种在模板中仅包含主要样式的方法。我查看了文档，似乎我不能 export 仅提供一个扩展名 a name。

我该怎么做呢？

HtmlWebpackPlugin 不会向 webpack 输出目录输出任何内容：我有这个设置：

但是没有 index.html 文件输出到公共。

我刚收到这条消息：

我有一个这样的目录结构：

在node_modules里面：

我需要像这样生成单独的 CSS 和 JS 包：

自定义样式.css、自定义-js.js、样式-libs.css、js-libs.js

在哪里style-libs并且js-libs应该包含所有库（如 bootstrap 和 jQuery）的 syles 和 js 文件。这是我到目前为止所做的：

webpack.config.js：

客户端.js

除了使用webpack.

我对 webpack 没有太多经验，并且发现它真的很难让我听到它。有几个简单的问题：

1-此配置正确吗？如果是，那么如何使用 ES6 在组件中包含我的 CSS 和 JS 文件。import关键字之类的东西。

2-我什至应该对 CSS 文件使用 webpack 吗？

3-如何在 webpack 中为输入及其各自的输出文件指定单独的目录？all-custom.js应该为custom1.jsand输出类似的东西custom2.js？

我知道这些是一些非常基本的问题，我尝试了 Google，但没有找到一个简单且针对初学者的 Webpack 教程。

所以这是我的 webpack 配置：

我的index.ejs文件：

我的文件夹结构：

我想模块化我的 html 文件，所以我想包含它们......

我尝试了很多方法，包括另一个模板，但都没有奏效......

有人可以给我任何关于如何使这项工作的想法吗？

JS代码

ejs代码

webpack.config.js

但是页面显示：

我想知道 HtmlWebpackPlugin 如何跳过解析<$= $>？

我最近删除了所有node_modules内容并做了一个新的npm install. 并不断收到此错误：

不知道发生了什么...我尝试更改所有版本： html-webpack-plugin, webpack，handlebars-loader认为这是一个版本问题。似乎不是。有任何想法吗？

我来自哪里

我已经使用 webpack 有一段时间了，但这是我第一次不为它修改入门工具包，而是尝试从头开始设置所有内容。

我关注了survivaljs.com 上的这篇不错的文章，并继承了其中描述的一些方法，将它们与我早期的一些设置结合起来（比如根据发送的生产变量设置不同的名称和路径）。

在讲座期间，我尝试尽可能多地运行“构建”和“启动”，以免被一些我无法追踪的意外行为所抓住。这工作得很好。

然后在某个时候，在摆弄关于从第三方框架中排除未使用的 css的章节时， 我不知何故破坏了我的开发服务器设置。（"run build"仍然有效！）

问题

我的热服务器定义在 192.168.1.2:3000（这正是我想要的）。当我webpack-dev-server使用下面进一步显示的设置运行时，我在该位置收到404（无法获取 /）。现在我已经阅读了很多关于如何正确设置 webpack 开发服务器的内容，但我仍然没有得到正确的答案......（很可能并不孤单......）因为我仍然不完全理解如何路径工作。

这是我的理解（通用开发服务器设置）：

（如果我在这方面错了，请帮助我）

• my 的输出路径webpack.config.js只会在运行开发服务器时在内存中提供，因此在物理上不可见（path: path.join(__dirname, 'devServerFolder'例如，如果输出是，如果不是由我创建，我将永远不会在项目结构中的任何地方看到该文件夹)
• 在我指向 with和with 的文件夹中需要一个index.html指向 my的静态文件（这可能是我需要在其中创建的文件夹；通常在网络上的大多数设置中，用于保存的文件夹相同）生产建立）bundle.jspublicPathcontentBasedevServerFolderindex.htmlpublic
• 如果我使用html-webpack-plugin插件，它将自动为我生成该文件，而无需指向任何内容，因为 bundle.js 由插件写入其中

这些是真正困扰我理解的一些要点。我已经尝试了很多。的。不同。组合使用publicPath和contentBase设置没有运气来重新建立我的开发服务器（首先工作正常）。 请注意，我在代码或使用 编译我的构建时没有任何问题run build，它工作正常，就像它应该的那样。

配置

文件夹结构

Webpack.config.js

我尝试使用 HtmlWebPackPlugin 来生成我的 index.html 所以......

1. 我启动了一个新项目vue init webpack-simple#1.0 vue-html-webpack
2. 安装npm i -D html-webpack-plugin
3. 重命名index.html为entry-template.html
4. 配置webpack.config.js..

我加 ..

但是网络我启动应用程序npm run dev，返回 404（我想没有找到index.html）

我的entry-template.html

完整来源在这里

结果-> https://vue-html-webpack-ogqlguavxx.now.sh/

问题

如何在 Vue 1.0中使用HtmlWebpackPlugin ？

我将尝试澄清问题标题，因为为我的问题想出标题并不容易。

问题更多与 Webpack 和 githubpages 配置相关。

背景：我在 github（https://github.com/SomePeaceStudio/manatelpa）上用 angular2 制作了测试项目。我正在测试如何使用 webpack 构建项目，然后将其 uglify 用于生产。

问题：当我在本地构建项目并提供服务时，从 localhost:8080/ 提供服务，并且所有内容都从 localhost:8080/ 正确加载，例如：

等等......它就像魔法一样工作。

当我将“dist”文件夹推送到 gh-pages 分支https://github.com/SomePeaceStudio/manatelpa/tree/gh-pages（我正在使用 gh-pages 进行项目）时，我的页面路径将是： https://somepeacestudio.github.io/manatelpa/ 在这种情况下它加载 index.html 从

但它试图从我的项目中获取其余部分

而不是来自：

难怪找不到它，我不知道该怎么办，所有的 webpack 构建配置都在 config/ 文件夹（common + prod）中。我需要修复它。

我不知道如何处理这个问题..我什至不知道如何正确命名它来做一些谷歌搜索..

我是否应该更改在我的 index.html 页面上加载内容的方式（它会自动执行），如果是这样，如何强制它从 baseurl/manatelpa/.. 加载我的所有内容。我寻找一些优雅的解决方案，如果有的话。

我绝对不是 webpack 和 ghpages 配置的专家。