Html webpack plugin title

Содержание

Saved searches
Use saved searches to filter your results more quickly
Title not working. #176
Title not working. #176
Comments
HtmlWebpackPlugin
Installation
Basic Usage
Configuration
Third party addons

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Title not working. #176

Comments

The plugin is instantiated using webpack-load-plugins :

var plugins = require('webpack-load-plugins')(); var webpack = require('webpack'); module.exports =  . . devtool: 'inline-source-map', devServer:  historyApiFallback: true, hot: true, inline: true, progress: true, // Display only errors to reduce the amount of output. stats: 'errors-only', // Parse host and port from env so this is easy to customize. host: process.env.HOST, port: process.env.PORT >, plugins: [ new plugins.html( title: "test app" >), new webpack.HotModuleReplacementPlugin() ] >

I am using webpack-dev-server as my webserver.

> html> head> meta charset pl-s">UTF-8"> title>%= htmlWebpackPlugin.options.title %>title> head> body> script src pl-s">lib.3660029166e2b80a54fa.js">script>script src pl-s">app.fbee4ebb5e598dc6a9b1.js">script>body> html>

Notice that the title is not replaced correctly.

The text was updated successfully, but these errors were encountered:

Do you use the html-loader?

@jantimon I didn’t use html-loader,now my config is:

var HtmlWebpackPlugin = require('html-webpack-plugin'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var webpack = require('webpack'); module.exports = < entry: < main: ['./src/example.js'] >, output: < path: __dirname + '/dist', publicPath: '', filename: 'bundle.js' >, module: < loaders: [< test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') >, < test: /\.png$/, loader: 'file-loader?name=images/[name].[ext]' >] >, plugins: [ new HtmlWebpackPlugin(< title: "TEST", template: 'underscore-template-loader!./src/template.html' >), new ExtractTextPlugin('styles.css') ] >;

If I remove the html loader and build or use the webpack dev server, it doesn’t even compile:

Hash: 9fcc69a03feb4ee3a665 Version: webpack 1.12.11 Time: 2335ms Asset Size Chunks Chunk Names lib.9fcc69a03feb4ee3a665.js 3.58 kB 0 [emitted] lib app.e3691464d2341c58a066.js 805 kB 1, 0 [emitted] app index.html 3.32 kB [emitted] + 216 hidden modules ERROR in Error: Child compilation failed: Module parse failed: C:\Work\test\ui\node_modules\html-webpack-plugin \lib\loader.js!C:\Work\test\ui\node_modules\html-webpack-plugin\defau lt_index.html Line 1: Unexpected token ILLEGAL You may need an appropriate loader to handle this file type. | var _ = require("C:\Work\test\ui\node_modules\lodash\index.js");mod ule.exports = function (obj) < | obj || (obj = <>); | var __t, __p = '';: Error: Line 1: Unexpected token ILLEGAL - compiler.js:66 [ui]/[html-webpack-plugin]/lib/compiler.js:66:16 - Compiler.js:214 Compiler. [ui]/[webpack]/lib/Compiler.js:214:10 - Compiler.js:403 [ui]/[webpack]/lib/Compiler.js:403:12 - Tapable.js:67 Compiler.next [ui]/[tapable]/lib/Tapable.js:67:11 - CachePlugin.js:40 Compiler. [ui]/[webpack]/lib/CachePlugin.js:40:4 - Tapable.js:69 Compiler.next [ui]/[tapable]/lib/Tapable.js:69:14 - index.js:67 Compiler. [ui]/[html-webpack-plugin]/index.js:67:5 - Tapable.js:71 Compiler.applyPluginsAsync [ui]/[tapable]/lib/Tapable.js:71:13 - Compiler.js:400 Compiler. [ui]/[webpack]/lib/Compiler.js:400:9 - Compilation.js:577 Compilation. [ui]/[webpack]/lib/Compilation.js:577:13 - Tapable.js:60 Compilation.applyPluginsAsync [ui]/[tapable]/lib/Tapable.js:60:69 - Compilation.js:572 Compilation. [ui]/[webpack]/lib/Compilation.js:572:10 - Tapable.js:60 Compilation.applyPluginsAsync [ui]/[tapable]/lib/Tapable.js:60:69 - Compilation.js:567 Compilation. [ui]/[webpack]/lib/Compilation.js:567:9 - Tapable.js:60 Compilation.applyPluginsAsync [ui]/[tapable]/lib/Tapable.js:60:69 - Compilation.js:563 Compilation. [ui]/[webpack]/lib/Compilation.js:563:8 - Tapable.js:60 Compilation.applyPluginsAsync [ui]/[tapable]/lib/Tapable.js:60:69 - Compilation.js:525 Compilation.seal [ui]/[webpack]/lib/Compilation.js:525:7 - Compiler.js:397 Compiler. [ui]/[webpack]/lib/Compiler.js:397:15 - Tapable.js:103 [ui]/[tapable]/lib/Tapable.js:103:11 - Compilation.js:445 Compilation. [ui]/[webpack]/lib/Compilation.js:445:10 - Compilation.js:344 Compilation.errorAndCallback [ui]/[webpack]/lib/Compilation.js:344:3 - Compilation.js:400 Compilation. [ui]/[webpack]/lib/Compilation.js:400:12 - Compilation.js:123 [ui]/[webpack]/lib/Compilation.js:123:4 - Array.forEach - Compilation.js:122 callback [ui]/[webpack]/lib/Compilation.js:122:12 - Compilation.js:137 Compilation. [ui]/[webpack]/lib/Compilation.js:137:11 - NormalModule.js:113 DependenciesBlock. [ui]/[webpack]/lib/NormalModule.js:113:11 - NormalModuleMixin.js:310 DependenciesBlock.onModuleBuild [ui]/[webpack-core]/lib/NormalModuleMixin.js:310:10 - NormalModuleMixin.js:275 nextLoader [ui]/[webpack-core]/lib/NormalModuleMixin.js:275:25 Child html-webpack-plugin for "index.html": + 1 hidden modules ERROR in ./~/html-webpack-plugin/lib/loader.js!./~/html-webpack-plugin/default_index.html Module parse failed: C:\Work\test\ui\node_modules\html-webpack-plugin\lib\loader.js!C:\Work\test\ui\node_modules\html-webpack-plugin\default_index.html Line 1: Unexpected token ILLEGAL You may need an appropriate loader to handle this file type. | var _ = require("C:\Work\test\ui\node_modules\lodash\index.js");module.exports = function (obj) < | obj || (obj = <>); | var __t, __p = '';

Источник

HtmlWebpackPlugin

The HtmlWebpackPlugin simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you, supply your own template using lodash templates, or use your own loader.

Installation

npm install --save-dev html-webpack-plugin

Basic Usage

The plugin will generate an HTML5 file for you that includes all your webpack bundles in the body using script tags. Add the plugin to your webpack configuration as follows:

const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); module.exports =  entry: 'index.js', output:  path: path.resolve(__dirname, './dist'), filename: 'index_bundle.js', >, plugins: [new HtmlWebpackPlugin()], >;

This will generate a file dist/index.html containing the following:

DOCTYPE html> html> head> meta charset="UTF-8" /> title>webpack Apptitle> head> body> script src="index_bundle.js"> script> body> html>

If you have multiple webpack entry points, they will all be included with tags in the generated HTML.

If you have any CSS assets in webpack’s output (for example, CSS extracted with the MiniCssExtractPlugin) then these will be included with tags in the element of generated HTML.

Configuration

For all configuration options, please see the plugin documentation.

Third party addons

The plugin supports addons. For a list see the documentation.

Источник