html-webpack-plugin

Assign separate entrypoint scripts to separate HtmlWebpackPlugin instances

由 橙三吉。 提交于 2019-12-06 13:16:54
问题 Given an entry/output like entry: { app: 'src/client/app.js', unauthApp.js: 'src/client/unauth.js' }, output: { path: 'dist', filename: 'scripts/[name]-[chunkhash].js' }, ... plugins: [ new HtmlWebpackPlugin({ filename: 'views/index.html' }), new HtmlWebpackPlugin({ filename: 'views/index-inauth.html' }) ] is it possible using two instances of HtmlWebpackPlugin to put the app script into one template and the unauthApp script into the other. So far all I have been able to do is put both

webpack html (ejs) include other templates

由 落爺英雄遲暮 提交于 2019-12-05 11:34:44
So this is my webpack config : import path from 'path'; var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: { index: './dev/index.js' }, output: { path: path.join(__dirname, 'dist'), // publicPath: 'http://localhost:3000/', filename: 'bundle.js', chunkFilename: '[id].bundle.js' }, module: { loaders: [ { test: /\.js$/, exclude: path.resolve(__dirname, "node_modules"), loader: 'babel-loader' } ] }, plugins: [ new HtmlWebpackPlugin({ hash: true, template: 'ejs!./dev/index.ejs', inject: 'body' }) ] }; My index.ejs file : <!DOCTYPE html> <html lang="en"> <head> <meta

Inline JavaScript and CSS with webpack

由 一曲冷凌霜 提交于 2019-12-05 00:28:19
问题 I'm using Webpack for bundling resources. Currently it bundle both the CSS and JS files into a separate file called bundle.js. How can I make both the JS and CSS embedded inline in html file? import HtmlWebpackPlugin from 'html-webpack-plugin'; import {HotModuleReplacementPlugin} from 'webpack'; export default { entry: {app: './test/dev'}, module: { loaders: [ {test: /\.js/, loader: 'babel-loader', exclude: /node_modules/}, {test: /\.scss$/, loader: 'style!css!sass'} ] }, plugins: [new

Assign separate entrypoint scripts to separate HtmlWebpackPlugin instances

由 走远了吗. 提交于 2019-12-04 19:51:02
Given an entry/output like entry: { app: 'src/client/app.js', unauthApp.js: 'src/client/unauth.js' }, output: { path: 'dist', filename: 'scripts/[name]-[chunkhash].js' }, ... plugins: [ new HtmlWebpackPlugin({ filename: 'views/index.html' }), new HtmlWebpackPlugin({ filename: 'views/index-inauth.html' }) ] is it possible using two instances of HtmlWebpackPlugin to put the app script into one template and the unauthApp script into the other. So far all I have been able to do is put both scripts in both. I'm also playing with using htmlWebpackTemplate so perhaps there is an option there I have

How to inject custom meta tags in html-webpack-plugin?

由 雨燕双飞 提交于 2019-12-03 15:52:13
I use Webpack along with the plugin html-webpack-plugin . Based on an environment variable, I want to inject a <meta></meta> tag into the final index.html file. How do I do this? You can define your own template. It's briefly mentioned in Writing Your Own Templates that you can pass any options you'd like to it and use them in the template with htmlWebpackPlugin.options : htmlWebpackPlugin.options : the options hash that was passed to the plugin. In addition to the options actually used by this plugin, you can use this hash to pass arbitrary data through to your template. For example you could

Inline JavaScript and CSS with webpack

由 ≯℡__Kan透↙ 提交于 2019-12-03 14:18:43
I'm using Webpack for bundling resources. Currently it bundle both the CSS and JS files into a separate file called bundle.js. How can I make both the JS and CSS embedded inline in html file? import HtmlWebpackPlugin from 'html-webpack-plugin'; import {HotModuleReplacementPlugin} from 'webpack'; export default { entry: {app: './test/dev'}, module: { loaders: [ {test: /\.js/, loader: 'babel-loader', exclude: /node_modules/}, {test: /\.scss$/, loader: 'style!css!sass'} ] }, plugins: [new HotModuleReplacementPlugin(), new HtmlWebpackPlugin()], devtool: 'eval-source-map' }; use https://github.com

How do I integrate the value of __webpack_nonce___ with my Content Security Policy?

由 杀马特。学长 韩版系。学妹 提交于 2019-12-03 13:26:47
From my understanding of Content Security Policy , the nonce has to change on every request. That means (I think) it must be generated at run-time on the client, not at build-time in the Webpack config. I've tested the webpack_nonce functionality in my app and it works great. Unfortunately, I'm not sure how to get that value, generated at run-time on the client, to the actual CSP policy, which is either set as a meta-tag in the index.html file (or some equivalent) or on the server itself. I suppose you could set the CSP meta-tag dynamically on the client, but that seems like a security risk. I

Entrypoint undefined = index.html using HtmlWebpackPlugin

由 我的梦境 提交于 2019-12-03 11:15:23
问题 I'm using Webpack 4 and I'm creating the config file, when trying to use the HtmlWebpackPlugin it got this on the console: Entrypoint undefined = index.html , it opens the browser and the HTML does appear but I'm getting this weird message on the console, how to solve this? That is how my config file looks like: 'use strict' const webpack = require('webpack') const { join, resolve } = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode:

How to load images through webpack when using HTMLWebpackPlugin?

由 那年仲夏 提交于 2019-12-03 04:53:35
I am using HTMLWebpackPlugin and in my template I have an img tag: <img src="./images/logo/png"> If you notice, here I am using a relative path thinking webpack will trigger the file loader that's configured in my webpack.config.js file but after compilation I get the exact same src attribute in my html: <img src="./images/logo/png"> How can I trigger webpack to dynamically replace these relative paths with, well whatever I've configured in my webpack configuration? I'm not a webpack expert, but i got it to work by doing this <img src="<%=require('./src/assets/logo.png')%>"> Plugin config new

How do I add certain script tags inside <head> and <body> tags when using HtmlWebackPlugin

由 做~自己de王妃 提交于 2019-12-03 03:35:01
I'm using HtmlWebpackPlugin to generate HTML files with javascript. Now I would like to add custom script at different parts of <head> and <body> tags Example: How do I, Add <script> alert('in head tag') </script> inside the <head> tag as the first child Add <script> alert('in body tag') </script> inside the <body> tag as the first child Here is the snippet in my Webpack config new HtmlWebpackPlugin({ hash: true, chunks: ["app"], filename: path.resolve(__dirname, "./public/pages/app.html"), title: "Title of webpage", template: path.resolve(__dirname, "./src/pages/app.page.html"), minify: {
订阅 html-webpack-plugin