从传统输入开始,如何webpack将Web应用程序转换为输出.html文件.html？
这是一个简单的起点:
的index.html
<body>
<output></output>
<script src="./main.js"></script>
</body>
main.js
import React from "react";
document.querySelector("output").innerText = React.version;
webpack.config.js
module.exports = {
entry: "./index.html",
output: {
filename: "output.html"
},
module: {
rules: [
{test: /^index\.html$/, use: [
{loader: "extract-loader"},
{loader: "html-loader", options: {
attrs: ["script:src"]
}}
]}
]
}
}
然而,这导致SyntaxError: Unexpected token import处理main.js时.
尝试使用html-loader插件在TypeScript中导入html :
import buttonHtml from './button.html';
出现TypeScript错误:
TS2307:找不到模块'./button.html'
Webpack配置:
const path = require('path');
module.exports = {
entry: {
'background.js':path.resolve(__dirname, './background.ts'),
'content.js': path.resolve(__dirname,'./content.ts')
},
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.html$/,
exclude: /node_modules/,
use: {loader: 'html-loader'}
}
]
},
resolve: {
extensions: [ ".tsx", ".ts", ".js" ]
},
output: {
filename: '[name]',
path: path.resolve(__dirname, 'dist')
}
};
html typescript webpack webpack-html-loader typescript-typings
我正在尝试替换index.html中的变量,如下所示:
<meta name='author' content=$variable>
在配置文件中我使用:
{
test: /index\.html$/,
loader: 'string-replace',
query: {
search: '$variable',
replace: 'stuff to inject',
},
}
在loaders数组中,然后在plugins:
new HtmlWebpackPlugin({
template: conf.path.src('src/index.html'),
inject: true,
})
但是这个设置导致:
ERROR in ./~/html-webpack-plugin/lib/loader.js!./src/index.html
Module parse failed (...) Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
您是否有任何想法可能是由此引起的或如何调试？
我使用html-loader加载我的html模板和文件加载器来加载模板中的图像.这在dev中运行得很好但是当我运行build:prod并运行输出时,我得到一个模板解析错误.
似乎所有angular2内置指令(例如,*ngFor,*ngIf)都被转换为全部小写(例如,*ngfor,*ngif),这些都是错误的例子.
我尝试创建一个单独的项目,这一次,不使用角度2的任何内置指令,一切正常.
我可以使用另一台装载机吗？如何正确加载这些模板以及这些模板使用的图像？
这是我的webpack.config
var webpack = require('webpack');
var HtmlWebPackPlugin = require('html-webpack-plugin');
var path = require('path');
module.exports = {
entry:'./src/main.ts',
output:{
path:'./dist',
filename:'app.bundle.js'
},
module:{
loaders:[{test:/\.ts$/, loader:'ts-loader'},
{ test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] },
{ test: /\.html$/, loader: 'html-loader' },
{test: /\.(jpe?g|png|gif|svg)$/i, loader: "file-loader"},
//{ test: /\.html$/, loader: 'raw-loader' },
//{ test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' }
]
/* loaders: [
// .ts files for TypeScript
{ test: /\.ts$/, loaders: ['awesome-typescript-loader', 'angular2-template-loader'] },
{ test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] }, …我想使用HTMLWebpackPlugin获取我的index.ejs模板文件,插入我的捆绑资产,并输出最终index.ejs文件.
这个例子有一个EJS变量<%= API_URL %>,但是webpack正在解释它.
如何阻止webpack替换变量？
启动"模板":
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Monitor</title>
<script>
window.config = {
API_URL: "<%= API_URL %>"
}
</script>
</head>
<body>
<div class="container"></div>
</body>
</html>
当您尝试运行webpack时:
ERROR in Template execution failed: ReferenceError: API_URL is not defined
期望的结果index.ejs :(有捆绑资产和EJS var)
监视器window.config = {API_URL:"<%= API_URL%>"}
webpack.config.js
var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
bundle: './src/index.js'
},
output: { …我正在尝试从我的webpack项目中的pug模板输出单个html文件.我遇到的问题是pug-loader将html渲染到文件中.
我的webpack.config:
const path = require('path');
const glob = require('glob');
const webpack = require('webpack');
const src = path.resolve(__dirname, 'src');
const dist = path.resolve(__dirname, 'dist');
module.exports = {
context: src,
entry: {
pug: glob.sync('./**/*.pug', {
cwd: src
}),
index: path.resolve(src, 'index.js')
},
output: {
path: dist,
filename: '[name].js'
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015'].map(dep =>
require.resolve(`babel-preset-${dep}`)
) // Fix for lerna symlinked deps
}
}
},
{
test: /\.pug$/, …有没有一种方法可以使用webpack在另一部分中包含html部分？我正在使用html-loader执行此操作：
index.html
<%= require('html-loader!./partials/_header.html') %>
但是，当我尝试在_header.html中包含另一个部分时，它无法呈现它。
这不起作用：
_header.html
<%= require('html-loader!./partials/_nav.html') %>
我花了几个小时进行基本的 webpack 配置，但仍然无法使其工作。我的目标是在将 html 模板导入 JavaScript 文件时对其进行解析。它看起来像是一个常见的用例，但我的 webpack 配置或我的理解中应该有一些奇怪的东西。
\n\n我寻找了html-loader、 、 的配置html-webpack-plugin，posthtml并且pug阅读了他们的所有文档，但没有一个起作用。
\n\n\nPostHTML 是一个使用 JS 插件转换 HTML/XML 的工具。PostHTML 本身非常小。它仅包括 HTML 解析器、HTML 节点树 API 和节点树字符串生成器。
\n
因此，由于它是最有前途的，我用 posthtml 报告了我的尝试：
\n\n rules: [\n {\n test: /.html$/,\n use: [\n {\n loader: "html-loader",\n options: {\n minimize: true,\n interpolation: false\n }\n },\n {\n loader: "posthtml-loader"\n }\n ]\n }\n ]\n它不会返回任何错误，但看起来完全忽略了 posthtml-loader，因为执行import template from \'src/test.html\'\xc2\xa0I …
我最近升级到 Webpack 5，我的 html-loader 不再加载 svg 文件并内联它们。
这是我在 webpack 中的 svg 规则
{
test: /\.svg$/,
use: [
{
loader: 'html-loader',
options: {
minimize: true,
},
},
],
},
无论我如何尝试导入它，它似乎只是创建一个文件，而不是给我一个 HTML 字符串。
import mySvg from "../path/to/my.svg"
let mySvg = require("../path/to/my.svg").default;
// output = "/build/path/my.svg"
// output I want = "<svg>...."
它过去不会给我几个构建文件，而是将它们内联到我的 JS 中。
如有帮助，将不胜感激。
我在使用 webpack 加载图像时遇到问题。
当我在 html 页面上使用图像标签时，一切正常：
<img src="../../content/images/logo.png">
但我也需要使用内联样式：
<div style="background-image: url('../../content/images/logo.png')">
在这种情况下，webpack 不会解析图像并将字符串留在 url()原样中。
网络包配置：
module: {
rules: [
{ test: /bootstrap\/dist\/js\/umd\//, loader: 'imports-loader?jQuery=jquery' },
{
test: /\.ts$/,
loaders: [
'angular2-template-loader',
'awesome-typescript-loader'
],
exclude: ['node_modules/generator-jhipster']
},
{
test: /\.html$/,
loader: 'html-loader',
options: {
minimize: true,
caseSensitive: true,
removeAttributeQuotes:false,
minifyJS:false,
minifyCSS:false
},
exclude: ['./src/main/webapp/index.html']
},
{
test: /\.scss$/,
loaders: ['to-string-loader', 'css-loader', 'sass-loader'],
exclude: /(vendor\.scss|global\.scss)/
},
{
test: /(vendor\.scss|global\.scss)/,
loaders: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
},
{
test: /\.css$/,
loaders: ['to-string-loader', …