我試圖通過webpack和htmlwebpack插件動態地將標題注入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

我正在申請這個文件-

Test site |

{{>partials/head}}

{{>partials/nav}}

{{>partials/footer}}

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

遺骸-

Test 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 },

]

]

}

總結

以上是生活随笔為你收集整理的html没有插件怎么办,html网页包插件没有插入options.title的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。