html-webpack-plugin

问题 Here is my webpack config : var path = require('path'); var webpack = require('webpack') var HtmlWebpackPlugin = require('html-webpack-plugin') var fs = require('fs'),buildPath='./dist/'; var folder_exists = fs.existsSync(buildPath); if(folder_exists == true) { require('shelljs/global') rm('-rf', 'dist') }; module.exports = { entry: './src/main', output: { path: path.join(__dirname, './dist'), filename: '[name].js', publicPath: '/dist/' }, devServer: { historyApiFallback: true, hot: false,

问题 I'm trying to add a specific js file to my index.html when bundling my application for production. My webpack.common.js has the following files that get injected into the html: entry: { 'polyfills': './src/polyfills.ts', 'vendor': './src/vendor.ts', 'app': './src/main.ts' }, And in the plugins section I have: new webpack.optimize.CommonsChunkPlugin({ name: ['app', 'vendor', 'polyfills'] }), For my webpack.prod.js I have the following output: output: { path: helpers.root('dist'), publicPath: '

问题 I am in the process of working through a tutorial on Webpack, but after adding in HtmlWebpackPlugin and trying to run Webpack again, I get the following error: Error: Cannot find module 'html-webpack-plugin' at Function.Module._resolveFilename (module.js:489:15) ... I have tried installing the plugin both locally and globally and I get the error both times. //webpack.config.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: ".

问题 I am using webpack for react(es6) project. My problem I have built react app with ES6 , so everywhere i have used import keyword for dependency. Now for server side rendering i am using NodeJS so its not support import yet. For this i have to use require instead of import . Now i have used webpack for bundling my app, but it always generate final bundle file (single.bundle.js), That's why i am not able to import chunk of transpiled code for server side rendering. Solution If it is possible to

问题 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? 回答1: 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

问题 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

问题 I'm trying to create a plugin that acts as a plugin wrapper , loading configuration, files, etc. and adding more plugins to the current webpack compilation process. In the apply function I create the plugins and then apply them against the original compiler, something like this: apply(compiler) { const plugins = [ new HtmlWebpackPlugin(options1), new HtmlWebpackPlugin(options2), ... ]; plugins.forEach((plugin) => { plugin.apply(compiler); }); }); My plugin doesn't add any hook to the webpack

问题 I'm using webpack-html-plugin to generate a one-page static website. I'm trying to implement cache busting for the static assets, images especially. I also have a meta tag for an open graph image, which is listed bellow. My webpack.config.js looks something along the lines of this: module.exports = { entry: './src/init.js', output: { path: './build', filename: 'bundle.js', }, module: { loaders: [{ test: /\.js?$/, exclude: /node_modules/, loader: 'babel-loader' }, { test: /\.(jpe?g|png|gif|svg

问题 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

问题 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!.