mirror of
https://github.com/sle118/squeezelite-esp32.git
synced 2025-12-06 19:47:02 +03:00
410 lines
14 KiB
JavaScript
410 lines
14 KiB
JavaScript
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
|
const CopyPlugin = require("copy-webpack-plugin");
|
|
const HtmlMinimizerPlugin = require("html-minimizer-webpack-plugin");
|
|
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
|
|
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
|
const CompressionPlugin = require("compression-webpack-plugin");
|
|
const TerserPlugin = require("terser-webpack-plugin");
|
|
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
|
|
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
|
|
const webpack = require("webpack");
|
|
const path = require("path");
|
|
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
|
|
const globSync = require("glob").sync;
|
|
const glob = require('glob');
|
|
const { merge } = require('webpack-merge');
|
|
const devserver = require('./webpack/webpack.dev.js');
|
|
const fs = require('fs');
|
|
const zlib = require("zlib");
|
|
const PurgeCSSPlugin = require('purgecss-webpack-plugin')
|
|
const whitelister = require('purgecss-whitelister');
|
|
|
|
|
|
const PATHS = {
|
|
src: path.join(__dirname, 'src')
|
|
}
|
|
|
|
class BuildEventsHook {
|
|
constructor(name, fn, stage = 'afterEmit') {
|
|
this.name = name;
|
|
this.stage = stage;
|
|
this.function = fn;
|
|
}
|
|
apply(compiler) {
|
|
compiler.hooks[this.stage].tap(this.name, this.function);
|
|
}
|
|
}
|
|
|
|
|
|
module.exports = (env, options) => (
|
|
merge(
|
|
env.WEBPACK_SERVE ? devserver : {},
|
|
env.ANALYZE_SIZE?{ plugins: [ new BundleAnalyzerPlugin() ]}:{},
|
|
{
|
|
entry:
|
|
{
|
|
index: './src/index.ts'
|
|
},
|
|
devtool:"source-map",
|
|
module: {
|
|
rules: [
|
|
{
|
|
test: /\.ejs$/,
|
|
loader: 'ejs-loader',
|
|
options: {
|
|
variable: 'data',
|
|
interpolate : '\\{\\{(.+?)\\}\\}',
|
|
evaluate : '\\[\\[(.+?)\\]\\]'
|
|
}
|
|
},
|
|
{
|
|
test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
|
|
use: [
|
|
{
|
|
loader: 'file-loader',
|
|
options: {
|
|
name: '[name].[ext]',
|
|
outputPath: 'fonts/'
|
|
}
|
|
}
|
|
]
|
|
},
|
|
// {
|
|
// test: /\.s[ac]ss$/i,
|
|
|
|
// use: [{
|
|
// loader: 'style-loader', // inject CSS to page
|
|
// },
|
|
// {
|
|
// loader: MiniCssExtractPlugin.loader,
|
|
// options: {
|
|
// publicPath: "../",
|
|
// },
|
|
// },
|
|
// "css-loader",
|
|
// {
|
|
// loader: "postcss-loader",
|
|
// options: {
|
|
// postcssOptions: {
|
|
// plugins: [["autoprefixer"]],
|
|
// },
|
|
// },
|
|
// },
|
|
// "sass-loader",
|
|
// ]
|
|
// },
|
|
{
|
|
test: /\.(scss)$/,
|
|
use: [
|
|
|
|
{
|
|
loader: MiniCssExtractPlugin.loader,
|
|
options: {
|
|
publicPath: "../",
|
|
},
|
|
},
|
|
// {
|
|
// // inject CSS to page
|
|
// loader: 'style-loader'
|
|
// },
|
|
{
|
|
// translates CSS into CommonJS modules
|
|
loader: 'css-loader'
|
|
},
|
|
|
|
{
|
|
// Run postcss actions
|
|
loader: 'postcss-loader',
|
|
options: {
|
|
// `postcssOptions` is needed for postcss 8.x;
|
|
// if you use postcss 7.x skip the key
|
|
postcssOptions: {
|
|
// postcss plugins, can be exported to postcss.config.js
|
|
plugins: function () {
|
|
return [
|
|
require('autoprefixer')
|
|
];
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
// compiles Sass to CSS
|
|
loader: 'sass-loader'
|
|
}]
|
|
},
|
|
{
|
|
test: /\.js$/,
|
|
exclude: /(node_modules|bower_components)/,
|
|
use: {
|
|
loader: "babel-loader",
|
|
options: {
|
|
presets: ["@babel/preset-env"],
|
|
plugins: ['@babel/plugin-transform-runtime']
|
|
|
|
},
|
|
},
|
|
},
|
|
{
|
|
test: /\.(jpe?g|png|gif|svg)$/i,
|
|
type: "asset",
|
|
},
|
|
// {
|
|
// test: /\.html$/i,
|
|
// type: "asset/resource",
|
|
// },
|
|
{
|
|
test: /\.html$/i,
|
|
loader: "html-loader",
|
|
options: {
|
|
minimize: true,
|
|
|
|
}
|
|
},
|
|
{
|
|
test: /\.tsx?$/,
|
|
use: 'ts-loader',
|
|
exclude: /node_modules/,
|
|
},
|
|
|
|
|
|
],
|
|
},
|
|
plugins: [
|
|
|
|
new HtmlWebpackPlugin({
|
|
title: 'SqueezeESP32',
|
|
template: './src/index.ejs',
|
|
filename: 'index.html',
|
|
inject: 'body',
|
|
minify: {
|
|
html5 : true,
|
|
collapseWhitespace : true,
|
|
minifyCSS : true,
|
|
minifyJS : true,
|
|
minifyURLs : false,
|
|
removeAttributeQuotes : true,
|
|
removeComments : true, // false for Vue SSR to find app placeholder
|
|
removeEmptyAttributes : true,
|
|
removeOptionalTags : true,
|
|
removeRedundantAttributes : true,
|
|
removeScriptTypeAttributes : true,
|
|
removeStyleLinkTypeAttributese : true,
|
|
useShortDoctype : true
|
|
},
|
|
favicon: "./src/assets/images/favicon-32x32.png",
|
|
excludeChunks: ['test'],
|
|
}),
|
|
// new CompressionPlugin({
|
|
// test: /\.(js|css|html|svg)$/,
|
|
// //filename: '[path].br[query]',
|
|
// filename: "[path][base].br",
|
|
// algorithm: 'brotliCompress',
|
|
// compressionOptions: { level: 11 },
|
|
// threshold: 100,
|
|
// minRatio: 0.8,
|
|
// deleteOriginalAssets: false
|
|
// }),
|
|
new MiniCssExtractPlugin({
|
|
filename: "css/[name].[contenthash].css",
|
|
}),
|
|
new PurgeCSSPlugin({
|
|
keyframes: false,
|
|
paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`, {
|
|
nodir: true
|
|
}),
|
|
whitelist: whitelister('bootstrap/dist/css/bootstrap.css')
|
|
}),
|
|
new webpack.ProvidePlugin({
|
|
$: "jquery",
|
|
// jQuery: "jquery",
|
|
// "window.jQuery": "jquery",
|
|
// Popper: ["popper.js", "default"],
|
|
// Util: "exports-loader?Util!bootstrap/js/dist/util",
|
|
// Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
|
|
}),
|
|
new CompressionPlugin({
|
|
//filename: '[path].gz[query]',
|
|
test: /\.js$|\.css$|\.html$/,
|
|
filename: "[path][base].gz",
|
|
|
|
algorithm: 'gzip',
|
|
|
|
threshold: 100,
|
|
minRatio: 0.8,
|
|
}),
|
|
|
|
new BuildEventsHook('Update C App',
|
|
function (stats, arguments) {
|
|
|
|
if (options.mode !== "production") return;
|
|
let buildRootPath = path.join(process.cwd(),'..','..','..');
|
|
let wifiManagerPath=glob.sync(path.join(buildRootPath,'components/**/wifi-manager*'))[0];
|
|
let buildCRootPath=glob.sync(buildRootPath)[0];
|
|
fs.appendFileSync('./dist/index.html.gz',
|
|
zlib.gzipSync(fs.readFileSync('./dist/index.html'),
|
|
{
|
|
chunckSize: 65536,
|
|
level: zlib.constants.Z_BEST_COMPRESSION
|
|
}));
|
|
|
|
var getDirectories = function (src, callback) {
|
|
var searchPath = path.posix.join(src, '/**/*(*.gz|favicon-32x32.png)');
|
|
console.log(`Post build: Getting file list from ${searchPath}`);
|
|
glob(searchPath, callback);
|
|
};
|
|
var cleanUpPath = path.posix.join(buildCRootPath, '/build/*.S');
|
|
console.log(`Post build: Cleaning up previous builds in ${cleanUpPath}`);
|
|
glob(cleanUpPath, function (err, list) {
|
|
if (err) {
|
|
console.error('Error', err);
|
|
} else {
|
|
list.forEach(fileName => {
|
|
try {
|
|
console.log(`Post build: Purging old binary file ${fileName} from C project.`);
|
|
fs.unlinkSync(fileName)
|
|
//file removed
|
|
} catch (ferr) {
|
|
console.error(ferr)
|
|
}
|
|
});
|
|
}
|
|
},
|
|
'afterEmit'
|
|
);
|
|
console.log('Generating C include files from webpack build output');
|
|
getDirectories('./dist', function (err, list) {
|
|
console.log(`Post build: found ${list.length} files. Relative path: ${wifiManagerPath}.`);
|
|
if (err) {
|
|
console.log('Error', err);
|
|
} else {
|
|
|
|
let exportDefHead =
|
|
`/***********************************
|
|
webpack_headers
|
|
${arguments[1]}
|
|
***********************************/
|
|
#pragma once
|
|
#include <inttypes.h>
|
|
extern const char * resource_lookups[];
|
|
extern const uint8_t * resource_map_start[];
|
|
extern const uint8_t * resource_map_end[];`;
|
|
let exportDef = '// Automatically generated. Do not edit manually!.\n' +
|
|
'#include <inttypes.h>\n';
|
|
let lookupDef = 'const char * resource_lookups[] = {\n';
|
|
let lookupMapStart = 'const uint8_t * resource_map_start[] = {\n';
|
|
let lookupMapEnd = 'const uint8_t * resource_map_end[] = {\n';
|
|
let cMake='';
|
|
|
|
list.forEach(foundFile => {
|
|
let exportName = path.basename(foundFile).replace(/[\. \-]/gm, '_');
|
|
//take the full path of the file and make it relative to the build directory
|
|
let cmakeFileName = path.posix.relative(wifiManagerPath,glob.sync(path.resolve(foundFile))[0]);
|
|
let httpRelativePath=path.posix.join('/',path.posix.relative('dist',foundFile));
|
|
exportDef += `extern const uint8_t _${exportName}_start[] asm("_binary_${exportName}_start");\nextern const uint8_t _${exportName}_end[] asm("_binary_${exportName}_end");\n`;
|
|
lookupDef += `\t"${httpRelativePath}",\n`;
|
|
lookupMapStart += '\t_' + exportName + '_start,\n';
|
|
lookupMapEnd += '\t_' + exportName + '_end,\n';
|
|
cMake += `target_add_binary_data( __idf_wifi-manager ${cmakeFileName} BINARY)\n`;
|
|
console.log(`Post build: adding cmake file reference to ${cmakeFileName} from C project, with web path ${httpRelativePath}.`);
|
|
});
|
|
|
|
lookupDef += '""\n};\n';
|
|
lookupMapStart = lookupMapStart.substring(0, lookupMapStart.length - 2) + '\n};\n';
|
|
lookupMapEnd = lookupMapEnd.substring(0, lookupMapEnd.length - 2) + '\n};\n';
|
|
try {
|
|
fs.writeFileSync('webapp.cmake', cMake);
|
|
fs.writeFileSync('webpack.c', exportDef + lookupDef + lookupMapStart + lookupMapEnd);
|
|
fs.writeFileSync('webpack.h', exportDefHead);
|
|
//file written successfully
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
}
|
|
});
|
|
console.log('Post build completed.');
|
|
|
|
})
|
|
],
|
|
optimization: {
|
|
minimize: true,
|
|
providedExports: true,
|
|
minimizer: [
|
|
|
|
new TerserPlugin({
|
|
terserOptions: {
|
|
format: {
|
|
comments: false,
|
|
},
|
|
},
|
|
extractComments: false,
|
|
// enable parallel running
|
|
parallel: true,
|
|
}),
|
|
new HtmlMinimizerPlugin(),
|
|
new CssMinimizerPlugin(),
|
|
new ImageMinimizerPlugin({
|
|
minimizer: {
|
|
implementation: ImageMinimizerPlugin.imageminMinify,
|
|
options: {
|
|
// Lossless optimization with custom option
|
|
// Feel free to experiment with options for better result for you
|
|
plugins: [
|
|
["gifsicle", { interlaced: true }],
|
|
["jpegtran", { progressive: true }],
|
|
["optipng", { optimizationLevel: 5 }],
|
|
// Svgo configuration here https://github.com/svg/svgo#configuration
|
|
[
|
|
"svgo",
|
|
{
|
|
plugins: [
|
|
{
|
|
name: 'preset-default',
|
|
params: {
|
|
overrides: {
|
|
// customize default plugin options
|
|
inlineStyles: {
|
|
onlyMatchedOnce: false,
|
|
},
|
|
|
|
// or disable plugins
|
|
removeDoctype: false,
|
|
},
|
|
},
|
|
}
|
|
],
|
|
},
|
|
],
|
|
],
|
|
},
|
|
},
|
|
}),
|
|
|
|
|
|
],
|
|
splitChunks: {
|
|
cacheGroups: {
|
|
vendor: {
|
|
name: "node_vendors",
|
|
test: /[\\/]node_modules[\\/]/,
|
|
chunks: "all",
|
|
}
|
|
}
|
|
}
|
|
|
|
},
|
|
// output: {
|
|
// filename: "[name].js",
|
|
// path: path.resolve(__dirname, "dist"),
|
|
// publicPath: "",
|
|
// },
|
|
resolve: {
|
|
extensions: ['.tsx', '.ts', '.js', '.ejs' ],
|
|
},
|
|
output: {
|
|
path: path.resolve(__dirname, 'dist'),
|
|
filename: './js/[name].[fullhash:6].bundle.js',
|
|
clean: true
|
|
},
|
|
}
|
|
)
|
|
); |