Add per-environment webpack configs

This commit is contained in:
0x1eef 2024-04-05 15:23:49 -03:00
parent 58825284f4
commit 47170706e3
5 changed files with 71 additions and 45 deletions

View file

@ -28,7 +28,8 @@
"webpack-merge": "^5.10.0"
},
"scripts": {
"build": "npm exec webpack",
"build:production": "npm exec webpack -- --config webpack.production.js",
"build:development": "npm exec webpack -- --config webpack.development.js",
"test": "npm exec jest -- test",
"format": "npm exec prettier -- -w src/js"
}

42
webpack.common.js Normal file
View file

@ -0,0 +1,42 @@
const path = require('path');
const process = require('process');
const CopyPlugin = require("copy-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
entry: {
index: './src/js/index.tsx',
},
output: {
filename: 'js/[name].js',
path: path.resolve(__dirname, 'build')
},
resolve: {
alias: { '~': [path.resolve('src/js/')] },
roots: [path.resolve('src/js'), path.resolve('node_modules')],
modules: [path.resolve('src/js'), path.resolve('node_modules')],
extensions: ['.ts', '.tsx']
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
plugins: [
new CopyPlugin({
patterns: [
{ from: "src/html/", to: "html" },
{ from: "src/css/", to: "css" },
{ from: "src/manifest.json", to: "manifest.json" },
{ from: "src/images", to: "images/" },
{ from: "src/_locales", to: "_locales/" },
{ from: "src/fonts", to: "fonts/" }
],
}),
new CleanWebpackPlugin(),
],
}

View file

@ -1,44 +1,6 @@
const path = require('path');
const process = require('process');
const CopyPlugin = require("copy-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
mode: process.env.NODE_ENV || "development",
devtool: "inline-source-map",
entry: {
index: './src/js/index.tsx',
},
output: {
filename: 'js/[name].js',
path: path.resolve(__dirname, 'build')
},
resolve: {
alias: { '~': [path.resolve('src/js/')] },
roots: [path.resolve('src/js'), path.resolve('node_modules')],
modules: [path.resolve('src/js'), path.resolve('node_modules')],
extensions: ['.ts', '.tsx']
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
plugins: [
new CopyPlugin({
patterns: [
{ from: "src/html/", to: "html" },
{ from: "src/css/", to: "css" },
{ from: "src/manifest.json", to: "manifest.json" },
{ from: "src/images", to: "images/" },
{ from: "src/_locales", to: "_locales/" },
{ from: "src/fonts", to: "fonts/" }
],
}),
new CleanWebpackPlugin(),
],
}
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(
common,
{mode: "development", devtool: "inline-source-map"},
)

11
webpack.development.js Normal file
View file

@ -0,0 +1,11 @@
const path = require('path');
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(
common,
{
mode: "development",
devtool: "inline-source-map",
output: {path: path.resolve(__dirname, 'build', 'development')}
}
)

10
webpack.production.js Normal file
View file

@ -0,0 +1,10 @@
const path = require('path');
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(
common,
{
mode: "production",
output: {path: path.resolve(__dirname, 'build', 'production')}
}
)