mirror of
https://github.com/sle118/squeezelite-esp32.git
synced 2026-05-21 04:35:31 +01:00
applied platformio structure
This commit is contained in:
426
lib/wifi-manager/webapp/webpack.config.js
Normal file
426
lib/wifi-manager/webapp/webpack.config.js
Normal file
@@ -0,0 +1,426 @@
|
||||
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(
|
||||
{
|
||||
analyzerMode: 'static',
|
||||
generateStatsFile: true,
|
||||
statsFilename: 'stats.json',
|
||||
}
|
||||
) ]}:{},
|
||||
|
||||
|
||||
{
|
||||
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,
|
||||
usedExports: true,
|
||||
minimizer: [
|
||||
|
||||
new TerserPlugin({
|
||||
terserOptions: {
|
||||
format: {
|
||||
comments: false,
|
||||
},
|
||||
},
|
||||
extractComments: false,
|
||||
// enable parallel running
|
||||
parallel: true,
|
||||
}),
|
||||
new HtmlMinimizerPlugin({
|
||||
minimizerOptions: {
|
||||
removeComments: true,
|
||||
removeOptionalTags: true,
|
||||
|
||||
}
|
||||
}
|
||||
),
|
||||
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
|
||||
},
|
||||
}
|
||||
)
|
||||
);
|
||||
Reference in New Issue
Block a user