webpack-html-loader | 易学教程

What exactly am I supposed to do with “module.exports = 'html_template_content'” on webpack

阅读更多关于 What exactly am I supposed to do with “module.exports = 'html_template_content'” on webpack

问题 So I want to do a very simple task using webpack. I have a few static HTML templates like e.g. test.html <div><span>template content</span></div> and all I want to do is return the string inside the template e.g require("raw!./test.html") with should return a string like: "<div><span>template content</span></div>" but instead, it returns the following string "modules.exports = <div><span>template content</span></div>" I have tried several modules, like the raw-loader and html-loader. and they

Webpack: include html partial inside another partial?

阅读更多关于 Webpack: include html partial inside another partial?

问题 Is there a way to include html partial inside another partial using webpack? I am using html-loader to do this: index.html <%= require('html-loader!./partials/_header.html') %> But when I try to include another partial inside a _header.html it is not able to render it. This is not working: _header.html <%= require('html-loader!./partials/_nav.html') %> 回答1: I was combining a little and I was able to find a solution. index.html <%= require('html-loader?root=.&minimize=true&interpolate!.

How to include raw static html file into another html file with webpack

阅读更多关于 How to include raw static html file into another html file with webpack

问题 I have a header.html file <header> <nav> ... some code here ... </nav> </header> And I have an index.html file too where I want to include this header.html. My index.html looks like this: <body> ${require('./header.html')} <div class="content">  </div> <div class="footer">  </div> </body> I'm using this webpack.config.js : const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); module.exports = { entry: ['.

how to inject css bundle in head and js bundle in body using webpack html plugin

阅读更多关于 how to inject css bundle in head and js bundle in body using webpack html plugin

问题 I am absolutely new to Webpack and I work with scss and vue on a little project. What I try is to compile all my .scss files to css and bundle them up in a bundle.css that is automatically injected into the head (I already set up the sass and css loaders to archieve the bundling to css). But I also want my vue app.js bundle at the end of the body, also injected by the htmlWebpackPlugin (already done). Using a single HtmlWebpackPlugin to put everything in my index.html would leave me with

webpack html-loaders lowercase angular 2 built-in directives

阅读更多关于 webpack html-loaders lowercase angular 2 built-in directives

I am using html-loader to load my html template and file-loader to load my images that are in the template. This run just fine in dev but when I run build:prod and run the output, I get a template parse error. It appears that all angular2 built-in directives (e.g., *ngFor, *ngIf) are all converted to all lowercase (e.g., *ngfor, *ngif) which cases the error. I tried create a separate project and this time, not using any built-in directives from angular 2, everything works fine. Is there another loader I can use? How do i correctly load these templates along with the images used by these

webpack html-loaders lowercase angular 2 built-in directives

阅读更多关于 webpack html-loaders lowercase angular 2 built-in directives

问题 I am using html-loader to load my html template and file-loader to load my images that are in the template. This run just fine in dev but when I run build:prod and run the output, I get a template parse error. It appears that all angular2 built-in directives (e.g., *ngFor, *ngIf) are all converted to all lowercase (e.g., *ngfor, *ngif) which cases the error. I tried create a separate project and this time, not using any built-in directives from angular 2, everything works fine. Is there

How can I use my webpack's html-loader imports in Jest tests?

阅读更多关于 How can I use my webpack's html-loader imports in Jest tests?

I am just getting started with the Jest test framework and while straight up unit tests work fine, I am having massive issues testing any component that in its module (ES module via babel+webpack) requires a HTML file. Here is an example: import './errorHandler.scss'; import template from './errorHandler.tmpl'; class ErrorHandler { ... I am loading the component specific SCSS file which I have set in Jest's package.json config to return an empty object but when Jest tries to run the import template from './errorHandler.tmpl'; line it breaks saying: /Users/jannis/Sites/my-app/src/scripts

Import html from typescript with webpack

阅读更多关于 Import html from typescript with webpack

问题 I am trying to import html into a variable in typescript using webpack. Here is my setup: package.json: { "devDependencies": { "awesome-typescript-loader": "^3.2.3", "html-loader": "^0.5.1", "ts-loader": "^2.3.7", "typescript": "^2.5.3", "webpack": "^3.6.0" } } webpack.config.js: const path = require('path'); const webpack = require('webpack'); module.exports = { context: path.join(__dirname), entry: './main', output: { path: path.join(__dirname, 'dist'), filename: 'app.js' }, resolve: { //

How can I use my webpack's html-loader imports in Jest tests?

阅读更多关于 How can I use my webpack's html-loader imports in Jest tests?

问题 I am just getting started with the Jest test framework and while straight up unit tests work fine, I am having massive issues testing any component that in its module (ES module via babel+webpack) requires a HTML file. Here is an example: import './errorHandler.scss'; import template from './errorHandler.tmpl'; class ErrorHandler { ... I am loading the component specific SCSS file which I have set in Jest's package.json config to return an empty object but when Jest tries to run the import

How can I provide parameters for webpack html-loader interpolation?

阅读更多关于 How can I provide parameters for webpack html-loader interpolation?

In the html-loader documentation there is this example require("html?interpolate=require!./file.ftl"); <#list list as list> <a href="${list.href!}" />${list.name}</a> </#list> <img src="${require(`./images/gallery.png`)}"> <div>${require('./components/gallery.html')}</div> Where does "list" come from? How can I provide parameters to the interpolation scope? I would like to do something like template-string-loader does: var template = require("html?interpolate!./file.html")({data: '123'}); and then in file.html <div>${scope.data}</div> But it doesn't work. I have try to mix the template-string