我试图通过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 },
]
]
}
.)