build: optimise production builds, automate creating zip files

This commit is contained in:
David Ralph
2021-06-22 21:07:56 +01:00
parent 50353c9e49
commit 5d3418a8af
3 changed files with 47 additions and 28 deletions

1
.gitignore vendored
View File

@@ -2,6 +2,7 @@
node_modules/ node_modules/
.vscode/ .vscode/
build/ build/
dist/
# Files # Files
package-lock.json package-lock.json

View File

@@ -48,13 +48,15 @@
"webpack": "^5.39.1", "webpack": "^5.39.1",
"webpack-cli": "^4.7.2", "webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2", "webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.8.0" "webpack-merge": "^5.8.0",
"zip-file-webpack-plugin": "^1.2.0"
}, },
"scripts": { "scripts": {
"start": "webpack serve --config webpack.dev.js", "start": "webpack serve --config webpack.dev.js",
"build": "webpack --config webpack.prod.js", "build": "webpack --config webpack.prod.js",
"chrome": "cp manifest/chrome.json build/manifest.json", "build:chrome": "webpack --config webpack.prod.js --env=type=chrome",
"firefox": "cp manifest/firefox.json build/manifest.json" "build:firefox": "webpack --config webpack.prod.js --env=type=firefox",
"postinstall": "node -e \"if (require('fs').existsSync('node_modules/.cache/webpack')) require('fs').rmSync('node_modules/.cache/webpack', { recursive: true })\""
}, },
"browserslist": { "browserslist": {
"production": [ "production": [

View File

@@ -3,29 +3,45 @@ const common = require('./webpack.common.js');
const path = require('path'); const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin'); const CopyPlugin = require('copy-webpack-plugin');
const ZipFilePlugin = require('zip-file-webpack-plugin');
module.exports = merge(common, { module.exports = (env) => {
mode: 'production', const type = env.type || 'web';
output: {
path: path.resolve(__dirname, './build'), return merge(common, {
filename: '[name].[chunkhash].js', mode: 'production',
chunkFilename: '[id].[chunkhash].chunk.js', output: {
clean: true path: path.resolve(__dirname, './build'),
}, filename: '[name].[chunkhash].js',
plugins: [ chunkFilename: '[id].[chunkhash].chunk.js',
new HtmlWebpackPlugin({ clean: true
template: path.resolve(__dirname, './public/index.html') },
}), cache: {
new CopyPlugin({ type: 'filesystem'
patterns: [{ },
from: 'public/icons', plugins: [
to: 'icons' new HtmlWebpackPlugin({
}, template: path.resolve(__dirname, './public/index.html')
{ }),
from: 'public/offline-images', new CopyPlugin({
to: 'offline-images' patterns: [{
} from: 'public/icons',
] to: 'icons'
}) },
] {
}); from: 'public/offline-images',
to: 'offline-images'
},
{
from: `manifest/${type}.json`,
to: 'manifest.json'
}
]
}),
new ZipFilePlugin({
path: '../dist/',
filename: `${type}.zip`
})
]
});
}