webpack-html-loader

Html-loader + file-loader not bundling the correct image source

由 廉价感情. 提交于 2021-02-11 15:12:59
问题 I'm planning to use Webpack for a project and I'm setting up my workflow with Html-loader + file-loader to get a production html file with dynamic src for the images, as Colt Steele teaches in this video. Here are my src/ files: index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Popular on Letterboxd</title> </head> <body> <img src="./assets/chira.jpg" /> </body> </html> index.js: import img from './assets/chira.jpg'; import "./main.css"; And main.css body {

Html-loader + file-loader not bundling the correct image source

由 核能气质少年 提交于 2021-02-11 15:11:58
问题 I'm planning to use Webpack for a project and I'm setting up my workflow with Html-loader + file-loader to get a production html file with dynamic src for the images, as Colt Steele teaches in this video. Here are my src/ files: index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Popular on Letterboxd</title> </head> <body> <img src="./assets/chira.jpg" /> </body> </html> index.js: import img from './assets/chira.jpg'; import "./main.css"; And main.css body {

Using webpack with a .html entry

由 不问归期 提交于 2020-12-29 09:34:22
问题 How can I webpack a web app into an output .html file, starting from a traditional input .html ? Here is a simple starting point: 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

HtmlWebpackPlugin load bundle.[hash].js/css into base twig file

由 拈花ヽ惹草 提交于 2020-07-10 07:08:44
问题 I have two entries in my webpack.config.js. One for the JS and one for the SCSS. I can run in development and product mode. If i create a production build I get the following files: index.html, main[hash].js, main[hash].css. In the index.html i have the link and script tag with the src to the files. How do i load these link & script tags in my base.twig file that get loaded when deploying the application? In development it loads the main.js from the base.twig and in that file everything is

HtmlWebpackPlugin load bundle.[hash].js/css into base twig file

由 大城市里の小女人 提交于 2020-07-10 07:08:32
问题 I have two entries in my webpack.config.js. One for the JS and one for the SCSS. I can run in development and product mode. If i create a production build I get the following files: index.html, main[hash].js, main[hash].css. In the index.html i have the link and script tag with the src to the files. How do i load these link & script tags in my base.twig file that get loaded when deploying the application? In development it loads the main.js from the base.twig and in that file everything is

Pass data to pug using pug-html-loader (cannot read property of undefined)

由 天大地大妈咪最大 提交于 2019-12-31 03:19:12
问题 According to the readme of pug-html-loader, the loader accepts a data object which is being passed as part of the options to the template. While not available on the options within the pug API reference, a grunt plugin I've found (grunt-contrib-pug) uses the API the same way. I've specified the following options for the loader: loader: 'pug-html-loader', options: { pretty: true, exports: false, debug: !env.production, compileDebug: !env.production, cache: config.build.useCaching, doctype:

Selectively exclude dynamic image paths from webpack with angular2

由 夙愿已清 提交于 2019-12-11 11:34:35
问题 I'm writing an Angular2 app using Webpack, and also using the html loader for my templates. I have this line in one of my templates: <img attr.src="apps/{{ appName }}/icon.png" /> html-loader is understandably trying to load this icon on compile time, and fails. As you can understand, my intention is for the path to the icon to be dynamic (this is part of an ngFor ), and thus I want webpack to ignore it during compile time. How can I instruct html-loader to ignore this particular img source?

Parse an HTML template as you require it in JavaScript

由 ▼魔方 西西 提交于 2019-12-10 15:20:03
问题 I spent hours on a basic webpack configuration but I'm still not able to make it work. My aim is to perform the parsing of a html template as you import it in a JavaScript file. It looks like a common use-case, but there should be something odd in my webpack configuration or in my understanding. I looked for configurations of html-loader , html-webpack-plugin , posthtml as well as pug and I've read all of their documentations, but none of them worked. According to PostHTML Readme: PostHTML is
订阅 webpack-html-loader