LukeParke/firecamp
1
0
Fork 0
mirror of https://github.com/LukeHagar/firecamp.git synced 2025-12-06 12:27:44 +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", "chai": "^3.5.0",
"circular-dependency-plugin": "^5.2.0", "circular-dependency-plugin": "^5.2.0",
"colors": "^1.4.0", "colors": "^1.4.0",
"compression-webpack-plugin": "^10.0.0",
"copy-webpack-plugin": "^10.2.4", "copy-webpack-plugin": "^10.2.4",
"copyfiles": "^2.4.1", "copyfiles": "^2.4.1",
"cross-env": "^7.0.3", "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`); // exec(`node ${buildPath}/build-scripts/init-package.js`);
// Generate .html // Generate .html
exec( // exec(
`pug -O "{ env: '${env}' }" -o ${buildPath} ${path.join( // `pug -O "{ env: '${env}' }" -o ${buildPath} ${path.join(
__dirname, // __dirname,
'../packages/firecamp-core/public/views/' // '../packages/firecamp-core/public/views/'
)}` // )}`
); // );
// cp( // cp(
// '-R', // '-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 webpack = require('webpack');
const path = require('path'); const path = require('path');
// eslint-disable-next-line import/no-extraneous-dependencies // 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 NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
const { Environment } = require('./scripts/constants'); const { Environment } = require('./scripts/constants');
@@ -15,24 +15,45 @@ const metadata = require('./package.json');
exports.common = { exports.common = {
entry: { entry: {
app: path.join( index: path.join(
__dirname, __dirname,
'./packages/firecamp-core/src/containers/index.tsx' './packages/firecamp-core/src/containers/index.tsx'
), ),
identity: path.join( // identity: path.join(
__dirname, // __dirname,
'./packages/firecamp-core/src/containers/identity.tsx' // './packages/firecamp-core/src/containers/identity.tsx'
), // ),
}, },
optimization: { optimization: {
nodeEnv: process.env.NODE_ENV, nodeEnv: process.env.NODE_ENV,
minimize: false, minimize: true,
runtimeChunk: 'single',
splitChunks: { splitChunks: {
name: 'vendor', // name: 'vendor',
chunks(chunk) { // chunks(chunk) {
// To prevent generate separate chunk for background script // // To prevent generate separate chunk for background script
// Because all node_modules not needed in background script // // Because all node_modules not needed in background script
return !chunk?.name?.includes('background'); // 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 = { exports.output = {
globalObject: 'this', globalObject: 'this',
filename: '[name].bundle.js', filename: '[name].bundle.js',
chunkFilename: '[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; if (env === Environment.Development) exports.output.clean = true;
exports.env = { exports.env = {
@@ -95,8 +119,9 @@ exports.env = {
exports.plugins = [ exports.plugins = [
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
inject: false, inject: true,
template: path.join(__dirname, `./build/${env}/index.html`), filename: '[name].html',
template: 'templates/index.html',
}), }),
new NodePolyfillPlugin(), new NodePolyfillPlugin(),
new webpack.ProgressPlugin({ new webpack.ProgressPlugin({

4
webpack.prod.js
View File

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