LukeParke/firecamp
1
0
Fork 0
mirror of https://github.com/LukeHagar/firecamp.git synced 2025-12-06 04:19:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: webpack optimised

Browse Source 
poc created with HtmlWebpackPlugin to remove pug files
This commit is contained in:
Nishchit14
2022-10-11 16:29:46 +05:30
parent 5f71a3326a
commit fca1672faa
5 changed files with 63 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -68,6 +68,7 @@
"chai": "^3.5.0",
"circular-dependency-plugin": "^5.2.0",
"colors": "^1.4.0",
"compression-webpack-plugin": "^10.0.0",
"copy-webpack-plugin": "^10.2.4",
"copyfiles": "^2.4.1",
"cross-env": "^7.0.3",

12
scripts/build.js
View File

@@ -56,12 +56,12 @@ module.exports = async () => {
// exec(`node ${buildPath}/build-scripts/init-package.js`);
// Generate .html
exec(
`pug -O "{ env: '${env}' }" -o ${buildPath} ${path.join(
__dirname,
'../packages/firecamp-core/public/views/'
)}`
);
// exec(
// `pug -O "{ env: '${env}' }" -o ${buildPath} ${path.join(
// __dirname,
// '../packages/firecamp-core/public/views/'
// )}`
// );
// cp(
// '-R',

12
templates/index.html Normal file
View File

@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Firecamp Platform</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="root"></div>
<!-- <script>console.log(htmlWebpackPlugin.tags.bodyTags, "htmlWebpackPlugin.tags.bodyTags")</script> -->
</body>
</html>

57
webpack.config.js
View File

@@ -4,7 +4,7 @@ require('dotenv').config();
const webpack = require('webpack');
const path = require('path');
// eslint-disable-next-line import/no-extraneous-dependencies
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
// const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { Environment } = require('./scripts/constants');
@@ -15,24 +15,45 @@ const metadata = require('./package.json');
exports.common = {
entry: {
app: path.join(
index: path.join(
__dirname,
'./packages/firecamp-core/src/containers/index.tsx'
),
identity: path.join(
__dirname,
'./packages/firecamp-core/src/containers/identity.tsx'
),
// identity: path.join(
// __dirname,
// './packages/firecamp-core/src/containers/identity.tsx'
// ),
},
optimization: {
nodeEnv: process.env.NODE_ENV,
minimize: false,
minimize: true,
runtimeChunk: 'single',
splitChunks: {
name: 'vendor',
chunks(chunk) {
// To prevent generate separate chunk for background script
// Because all node_modules not needed in background script
return !chunk?.name?.includes('background');
// name: 'vendor',
// chunks(chunk) {
// // To prevent generate separate chunk for background script
// // Because all node_modules not needed in background script
// return !chunk?.name?.includes('background');
// },
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 0,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
return 'vender';
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
// const packageName = module.context.match(
// /[\\/]node_modules[\\/](.*?)([\\/]|$)/
// )[1];
// // npm package names are URL-safe, but some servers don't like @ symbols
// return `npm.${packageName.replace('@', '')}`;
},
},
},
},
},
@@ -56,14 +77,17 @@ exports.common = {
},
};
const outputPath = `${__dirname}/build/${env}`;
const publicPath = '';
exports.output = {
globalObject: 'this',
filename: '[name].bundle.js',
chunkFilename: '[name].bundle.js',
publicPath: '/js',
path: outputPath,
publicPath,
};
exports.output.path = path.join(__dirname, `./build/${env}/js`);
// exports.output.path = path.join(__dirname, `./build/${env}`);
if (env === Environment.Development) exports.output.clean = true;
exports.env = {
@@ -95,8 +119,9 @@ exports.env = {
exports.plugins = [
new HtmlWebpackPlugin({
inject: false,
template: path.join(__dirname, `./build/${env}/index.html`),
inject: true,
filename: '[name].html',
template: 'templates/index.html',
}),
new NodePolyfillPlugin(),
new webpack.ProgressPlugin({

4
webpack.prod.js
View File

@@ -1,6 +1,7 @@
/* eslint-disable no-console */
const path = require('path');
const webpack = require('webpack');
const CompressionPlugin = require('compression-webpack-plugin');
const { common, env, plugins, rules } = require('./webpack.config');
const nodeEnv = process.env.NODE_ENV;
@@ -11,7 +12,7 @@ const config = {
globalObject: 'this',
filename: '[name].bundle.js',
chunkFilename: '[name].bundle.js',
path: path.join(__dirname, `./build/${nodeEnv}/js`),
path: path.join(__dirname, `./build/${nodeEnv}`),
},
plugins: [
...plugins,
@@ -22,6 +23,7 @@ const config = {
new webpack.DefinePlugin({
'process.env': env,
}),
new CompressionPlugin(),
],
module: {
rules: [