index.ejs我正在尝试使用html-webpack-plugin构建单独的 HTML 文件。
我的index.ejs有以下代码块。
<% if (process.env.NODE_ENV === 'production') { %>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js"></script>
<% } %>
我只想在生产中加载这些脚本。
在我的 webpack 文件中，我加载HtmlWebpackPlugin以指定 ejs 模板的位置。
plugins: [
new HtmlWebpackPlugin({
template: 'index.ejs'
}),
...
当我在生产模式下运行 webpack 时--env.prod，它会正确地将文件构建到我的public目录中。但是当我运行时--env.dev，这个插件不运行。
如何HtmlWebpackPlugin在开发模式下运行来构建特定于我的开发环境的 HTML 文件？
我正在使用 webpack2 并使用 express 对 hot loader3 做出反应。我收到一个错误
未捕获的语法错误：在 dist/index.html 中出现意外标记 <
这是我的配置文件
webpack.config.js
const isDevelopment = process.argv.indexOf('--development') !== -1;
const VENDOR_LIBS = [
'react', 'react-dom', 'redux', 'react-redux',
'react-router', 'react-router-redux', 'lodash',
'express',
];
const entryPath = path.join(__dirname, 'src/index.js');
const config = {
entry: {
bundle: isDevelopment ? [
'webpack-hot-middleware/client?reload=true',
'react-hot-loader/patch',
entryPath
] : entryPath,
vendor: VENDOR_LIBS
},
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '',
filename: isDevelopment ? '[name].js' : '[name].[chunkhash].js',
},
module: {
rules: [
{
loader: ExtractTextPlugin.extract({
loader: 'css-loader' …有没有办法让 Webpack 将已编译的SCSS → CSS文件作为内联样式标记添加到我的 Angular 项目的index.html头部？
目标是在 Angular 忙于引导时设置显示的“正在加载...”页面的样式。为了避免 FOUC，生成的 CSS 文件需要内联注入，作为我的 index.html 头部中的样式标签。这样，一旦加载了index.html，我们就不需要等待另一个网络资源加载来查看我们的预引导样式。
这也可能是在 index.html 页面中内联一个小徽标作为 base64 数据 URI 的一种有价值的方法。
该项目是使用 Angular CLI 创建的，并使用 Angular 4 和 Webpack 2。我使用 webpack.config.js 弹出了 Webpack 配置并对webpack.config.jsng eject进行了少量修改。我几乎只从配置中删除了 LESS 和 Stylus 支持。
这是我的 webpack.config.js 供参考：
const path = require('path');
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
const postcssUrl = …webpack html-webpack-plugin webpack-2 extract-text-plugin angular
我需要在一个文件中创建所有内容。我编写的网页将从我无法访问相对（和绝对）路径的地方提供服务。所以我需要将js放在index.html文件中的标签之间。
我从 vue webpack 模板开始，将其修改为只有两个文件 - js 和 html 文件。我可以使用 sed 等自动化它，但有更好的方法吗？
当我尝试使用 index.ejs 模板文件使用 html-webpack-plugin 进行构建时，会引发以下错误：
即使我尝试加载为 .html 文件或安装 ejs-loader，仍然失败。我不确定 ejs-loader 是否与 html-webpack-plugin 一起安装。
其他一些人也有同样的问题，但是他们的 webpack 版本是 @1 并且该链接上的解决方案对我不起作用。，
https://github.com/jantimon/html-webpack-plugin/issues/273
./node_modules/html-webpack-plugin/lib/loader.js!./src/index.ejs 中出现错误
模块构建失败：语法错误：意外的标记 (1:1)
src/index.ejs
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/assets/css/bootstrap.min.css">
<title>My Library</title>
</head>
<body>
<div class="main-content"></div>
<footer class="footer-container"><p><span>Source: </span><a href="https://github.com/arikanmstf/mylibrary">https://github.com/arikanmstf/mylibrary</a></p></footer>
</body>
</html>
webpack.config.js：
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
const webpack = require("webpack");
const argv = require("yargs").argv;
const path = require("path");
const extractCSS = new ExtractTextPlugin("dist/style.css");
const …我的环境如下
我提取的 webpack.config.js 文件如下
entry: {
'polyfills': './src/polyfills.browser.ts',
'main': './src/main.browser.ts'
},
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
生成的最终 html 具有以下脚本引用
<script type="text/javascript" src="main.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script>
我的问题是在 main.bundle.js 之后引用了 polyfills.bundle.js。因此，该应用程序无法运行。据我所知，应该以相反的顺序引用脚本文件。我该如何解决？另外 HtmlWebpackPlugin 如何确定插入脚本的顺序？
我正在寻找一种使用 Nunjucks 和 htmlWebpackPlugin 在 webpack 编译时生成一些 html 文件的方法。
到目前为止我取得的成就
我设法通过nunjucks-html-loader从 nunjucks 模板文件中实际生成 HTML，但看起来更接近于所述加载器的代码，render 方法被调用，而无需向模板发送变量。
所以，现在使用以下插件配置，我生成了没有动态插入变量的 HTML
new HtmlWebpackPlugin({
filename: path.join(__dirname, '/' + page.filename),
template: 'nunjucks-html-loader!assets/templates/' + page.name + '.njk'
})
我试过的
出于测试目的，我尝试对 node_module 本身进行一些更改（我知道，我知道...）并进行了更改
html = template.render(nunjucksContext);
进入
html = template.render(nunjucksContext, { globals: global.globals });
试图global.globals在我的webpack.config.js文件中定义，但这会因以下错误而崩溃
ERROR in Error: Child compilation failed:
Module build failed: TypeError: parentFrame.push is not a function
这超出了我的理解。
我想要的是
是使用像 nunjucks 这样的可扩展模板引擎，它允许我像下面这样构建我的模板
<html>
<!-- layout structure inherited from every …我是 webpack 的新手，正在为传统的服务器端 served-html 网站构建一个 JS 应用程序（只有 vanilla JS）。
我对代码拆分、通用块、拆分块和 htmlWebpackPlugin 块感到困惑。我有一些工作，但我的一些应用程序代码在包中被复制。
这是我正在尝试做的事情（为了可读性而省略了哈希值）：
// ALL pages get this (node_modules stuff)
<script src="/static/vendors.js"></script>
// ALL pages get this (base JS for my app)
<script src="/static/app.js"></script>
// ONLY product pages get this. This is where I am having problems
// with modules from app.js getting copied in
<script src="/static/product.js"></script>
我已经解决了“供应商”部分，我将其添加到我的 webpack 配置中：
optimization: {
splitChunks: {
cacheGroups: {
commons: { test: /[\\/]node_modules[\\/]/, name: "vendors", chunks: "all" }
}
}
},
我还在产品页面上有条件地包含 product.js …
因此，我尝试将webpack-dev-middleware和webpack-hot-middleware与 HtmlWebpackPlugin 结合使用，为此我遵循了以下链接https://github.com/jantimon/html-webpack-plugin/issues/145 但我真的无法理解这里的建议。
无论如何，我确实在输出 html 中获取了bundle.js 文件，但 js 没有按预期执行。此外，我确实HMR Connected在控制台中收到了消息。不过，这同样适用于我的生产 webpack 文件。
我该如何解决这个问题或着手解决这个问题？
另外，根据下面的项目结构，我提供了多个 html 文件，因此在 srcServer.js 中是否有关于这些文件合并的输入？
包.json
...
"start": "babel-node buildScripts/srcServer.js"
...
srcServer.js
/* eslint-disable */
import express from 'express'
import path from 'path'
import opn from 'opn'
import bodyParser from 'body-parser'
import historyApiFallback from 'connect-history-api-fallback'
import WebpackDevMiddleware from 'webpack-dev-middleware'
import WebpackHotMiddleware from 'webpack-hot-middleware'
import WebpackConfig from '../webpack.config'
import webpack from 'webpack'
const compiler = webpack(WebpackConfig)
const app = express() …我正在弹出的反应 cli 上构建一个项目。我弹出它的原因是因为将生成多个页面和一些我想要制作的独立脚本，并让它们利用样板提供的 ES6 和调试工具。
我的问题是，在使用该技术构建多个页面时， html-webpack-plugin会使用每个页面的两个脚本构建生成的 HTML 文件。
那么，让我们来看看基本的入口点
这是我的基本网络包配置。
...
entry: {
devServerClient : require.resolve('react-dev-utils/webpackHotDevClient'),
// Finally, this is your app's code:
...pages,
},
...
如您所见，我正在使用与样板一起提供的相同热模块重新加载内容，但随后我偏离了从另一个页面所需的 pages 变量中传播值：
const glob = require("glob");
const path = require("path");
const input_path = path.resolve(__dirname, "../src/apps/*/index.js");
const apps_directories = glob.sync(input_path);
let pages = {};
// Loop through them and append them to the pages object for processing.
apps_directories.map(function (app_directory) {
const split_name = app_directory.split("/");
pages[split_name[split_name.length - 2]] = app_directory;
}); …