使用Hugo,Webpack和Workbox时,我无法正确完成构建步骤以包含所有静态文件。我需要通过运行webpack来添加资产,但随后我却错过了在webpack完成后在我的npm scipt中发生的hugo生成的文件。
下面的代码仅生成一个precache-manifest.json
文件,其中包含管道中的webpack资产。
我需要它提供的是Hugo构建的所有静态资产。似乎是时间问题,我希望有一个辅助构建步骤,或者只是脚本将添加所有静态文件。
完整仓库https://github.com/AJONPLLC/ajonp
package.json
"build": "rm -rf public && npm run build:webpack && npm run build:hugo",
"build:hugo": "hugo -d ../public -s site -v",
"build:webpack": "cross-env NODE_ENV=production webpack --config webpack.prod.js --hot --inline"
webpack.common.js
const webpack = require("webpack");
const path = require("path");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const AssetsPlugin = require("assets-webpack-plugin");
module.exports = {
entry: {
main: path.join(__dirname, "src", "index.js")
},
output: {
path: path.join(__dirname, "public")
},
module: {
rules: [
{
test: /\.((png)|(eot)|(woff)|(woff2)|(ttf)|(svg)|(gif))(\?v=\d+\.\d+\.\d+)?$/,
loader: "file-loader?name=/[hash].[ext]"
},
{test: /\.json$/, loader: "json-loader"},
{
loader: "babel-loader",
test: /\.js?$/,
exclude: /node_modules/,
query: {cacheDirectory: true}
},
{
test: /\.(sa|sc|c)ss$/,
exclude: /node_modules/,
use: ["style-loader", MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"]
}
]
},
plugins: [
new webpack.ProvidePlugin({
fetch: "imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch"
}),
new CopyWebpackPlugin([
{
from: "./src/fonts/",
to: "fonts/",
flatten: true
}
]),
new CopyWebpackPlugin([
{
from: "./node_modules/@ionic/core/",
to: "ionic/core/",
ignore: ['*.ts', '*.scss', '*e2e.js'],
flatten: false
}
]),
new AssetsPlugin({
filename: "webpack.json",
path: path.join(process.cwd(), "site/data"),
prettyPrint: true
})
]
};
webpack.prod.js
const merge = require("webpack-merge");
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const common = require("./webpack.common.js");
const {InjectManifest, GenerateSW} = require('workbox-webpack-plugin');
module.exports = merge(common, {
mode: "production",
output: {
filename: "[name].[hash:5].js",
chunkFilename: "[id].[hash:5].css"
},
optimization: {
minimizer: [
new TerserPlugin({
cache: true,
parallel: true,
sourceMap: true
}),
new MiniCssExtractPlugin({
filename: "[name].[hash:5].css",
chunkFilename: "[id].[hash:5].css"
}),
new OptimizeCSSAssetsPlugin({}),
]
},
plugins: [
new InjectManifest({
swSrc: './src/sw.js',
exclude: [/\.md$/, /\.xml$/, /\.txt$/, /\.json$/, /\.keep$/, /\.DS_Store$/, '404.html', '404/index.html']
}),
]
});