html-webpack-plugin未插入options.title

时间：2019-04-14 00:08:26

标签： webpack handlebars.js html-webpack-plugin

我正在尝试通过webpack和html-webpack-plugin将标题动态注入html。我正在使用车把模板引擎。但是我没有注入title。这是我的webpack配置的样子-

/*
|----------------------------------------------
| setting up webpack build process for app
| @author: jahid haque 
| @copyright: mysite, 2019
|----------------------------------------------
*/

const SriPlugin = require('webpack-subresource-integrity');
const Webpack = require('webpack');
const Path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

const Optim = {
    runtimeChunk: 'single',
    splitChunks: {
        chunks: 'all',
        maxInitialRequests: Infinity,
        minSize: 0,
        cacheGroups: {
            vendor: {
                test: /[\\/]node_modules[\\/]/,
                name(module) {
                    const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
                    return `npm.${packageName.replace('@', '')}`;
                },
            },
        },
    },
};

const Module = {
    rules: [
        {
            test: /\.jsx$/,
            exclude: /node_module/,
            use: {
                loader: 'babel-loader',
            },
        },
        {
            test: /\.handlebars$/,
            exclude: /node_module/,
            use: {
                loader: 'handlebars-loader',
            },
        },
    ],
};


module.exports = [

    {
        entry: {
            home: Path.resolve(__dirname, './src/components/home/home.controller.jsx'),
        },
        output: {
            path: Path.resolve(__dirname, './public'),
            filename: Path.join('./js/[name].[contenthash].js'),
            publicPath: '',
            crossOriginLoading: 'anonymous',
        },
        optimization: Optim,

        module: Module,

        plugins: [
            new HtmlWebpackPlugin({
                inject: true,
                hash: true,
                title: 'home page. know how we work',
                template: './src/index.handlebars',
                filename: Path.resolve(__dirname, './public/index.html'),
            }),
            new Webpack.HashedModuleIdsPlugin(),
            new SriPlugin({
                hashFuncNames: ['sha512', 'sha384'],
                enabled: true,
            }),
            new Webpack.NamedChunksPlugin(),
            new CleanWebpackPlugin({
                cleanOnceBeforeBuildPatterns: ['./public/js/'],
            }),
            new WebpackMd5Hash(),
        ],

    },       

    {
        entry: {
            style: Path.resolve(__dirname, './src/scss/app.scss'),
        },
        output: {
            path: Path.resolve(__dirname, './public/css/'),
        },
        optimization: {
            minimizer: [
                new OptimizeCSSAssetsPlugin({}),
            ],
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: 'styles.css',
            }),
        ],
        module: {
            rules: [
                {
                    test: /\.s?css$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        'sass-loader',
                    ],
                },
            ],
        },
    },
];

和我的htmlWebpack插件设置是-

new HtmlWebpackPlugin({
   inject: true,
   hash: true,
   title: 'welcome to home page',
   template: './src/index.handlebars',
   filename: 'index.html',
 }),

在我的index.handlebars文件中，我正在应用它-

<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Test site | <%= htmlWebpackPlugin.options.title %></title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        {{>partials/head}}
    </head>

    <body class="d-flex flex-column h-100 pt-60">

        {{>partials/nav}}

        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <main role = 'main' class="flex-shrink-0 min-height-750">
            <div id="welcomeHome"></div>    
        </main>  

        {{>partials/footer}}

    </body>
</html>

这是package.json 

{
  "name": "chefcooks",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "start": "webpack-dev-server --mode development --open",
    "dev": "webpack --mode development --watch",
    "build": "webpack --mode production"
  },
  "repository": {
    "type": "git",
    "url": "git+https://hidhaque@bitbucket.org/hidhaque/chefcooks.git"
  },
  "author": "jahid haque",
  "license": "ISC",
  "homepage": "https://bitbucket.org/hidhaque/chefcooks#readme",
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "@babel/preset-es2015": "^7.0.0-beta.53",
    "@babel/preset-react": "^7.0.0",
    "@babel/runtime": "^7.4.3",
    "axios": "^0.18.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-transform-async-to-generator": "^6.24.1",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "clean-webpack-plugin": "^2.0.1",
    "css-loader": "^2.1.1",
    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.12.4",
    "handlebars": "^4.1.1",
    "handlebars-loader": "^1.7.1",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.6.0",
    "node-sass": "^4.11.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "platform": "^1.3.5",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-loadable": "^5.5.0",
    "sass-loader": "^7.1.0",
    "uglifyjs-webpack-plugin": "^2.1.2",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.3.1",
    "webpack-md5-hash": "0.0.6",
    "webpack-subresource-integrity": "^1.3.2"
  }
}

但是我的index.html中标题的输出仍然是-

<title>Test title | <%- HtmlWebpackPlugin.options.title %></title>

这是.babelrc-

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "@babel/plugin-transform-runtime", 
        "@babel/plugin-syntax-dynamic-import",
        "transform-async-to-generator",
        [
            "transform-class-properties", 
            { "spec": true }, 
        ]
    ]
}

可以在这里使用一些帮助。我是新来的。非常感谢。

1 个答案:

答案 0 :(得分：0)

我试图重现该问题，但是我不能这样做，我已经举了这个例子，一切都很好： webpack.config.js 

const path = require('path');
const WebpackHTMLPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'app.bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.handlebars/,
                use: 'handlebars-loader',
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new WebpackHTMLPlugin({
            inject: true,
            hash: true,
            title: 'My custom title!',
            template: './template.hbs'
        })
    ]
}

车把模板： 

<html>
<head>
    <meta charset="UTF-8">
    <title>{{ htmlWebpackPlugin.options.title }}</title>
</head>
<body>

</body>
</html>

以防万一我告诉你我的package.json：

{
  "name": "webpack-hbs",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "webpack --config webpack.config"
  },
  "devDependencies": {
    "handlebars-loader": "^1.7.1",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.0"
  }
}

查看您的代码，我想知道您正在使用React，也许您可​​以尝试这段代码并讨论输出？希望这个答案对您的问题有所帮助。干杯，辛辣的。

更新

我已经设法解决了这个问题，您可以看到我对index.handlebars所做的简单更改。显然，如html-webpack-plugin documentation中指出的那样，当您使用其他加载程序时，它将禁用ejs fallback loader，我假设因为<title><%= htmlWebpackPlugin.options %></title>在您的情况下不起作用，所以我已将模板更改为使用Handlebars strings interpolation。我仍然认为这很奇怪，也许我想念其他东西，但是无论如何，这现在正在起作用。总是很高兴能提供帮助，欢呼声高涨。

相关问题
最新问题