Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: migrate to webpack 5 (#9) #12

Merged
merged 1 commit into from
May 4, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5,783 changes: 2,334 additions & 3,449 deletions package-lock.json

Large diffs are not rendered by default.

38 changes: 19 additions & 19 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
"scripts": {
"clean": "rimraf build && rimraf bundle",
"start": "cross-env WEBPACK_PATH=test webpack-dev-server --open --mode development --env development_core",
"build": "npm run clean && cross-env WEBPACK_PATH=test NODE_ENV=production webpack -p --mode production --env production",
"watch": "cross-env WEBPACK_PATH=test NODE_ENV=production webpack --watch -p --mode production --env production",
"build": "npm run clean && cross-env WEBPACK_PATH=test NODE_ENV=production webpack --mode production --env production",
"watch": "cross-env WEBPACK_PATH=test NODE_ENV=production webpack --watch --mode production --env production",
"test": "npm run lint && npm run build && npm run karma",
"karma": "cross-env WEBPACK_PATH=test karma start ./src/test/karma.config.js",
"lint": "cross-env WEBPACK_PATH=test eslint --fix --quiet \"**/*.*{js,jsx,ts,tsx}\" --ignore-pattern \"build/**/*\"",
Expand Down Expand Up @@ -81,14 +81,14 @@
"body-parser": "^1.19.0",
"chai": "^4.2.0",
"chai-enzyme": "^1.0.0-beta.1",
"copy-webpack-plugin": "^9.0.1",
"copy-webpack-plugin": "^10.0.0",
"core-js": "^3.6.4",
"css-loader": "^5.2.7",
"css-loader": "^6.5.1",
"dotenv-webpack": "^7.0.3",
"enzyme": "^3.11.0",
"express-useragent": "^1.0.13",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^3.2.0",
"html-webpack-plugin": "^5.5.0",
"install": "^0.13.0",
"ip": "^1.1.5",
"karma": "^4.4.1",
Expand All @@ -101,34 +101,34 @@
"karma-nyan-reporter": "^0.2.5",
"karma-sourcemap-loader": "^0.3.7",
"karma-typescript": "^5.5.1",
"karma-webpack": "^4.0.2",
"loader-utils": "^1.4.0",
"mini-css-extract-plugin": "^1.6.2",
"karma-webpack": "^5.0.0",
"loader-utils": "^3.2.0",
"mini-css-extract-plugin": "^2.4.5",
"mocha": "^7.1.2",
"node-port-check": "^2.0.1",
"node-sass": "^6.0.1",
"npm": "^6.14.4",
"postcss": "^8.3.11",
"postcss-import": "^14.0.2",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.0",
"postcss": "^8.4.13",
"postcss-import": "^14.1.0",
"postcss-loader": "^6.2.1",
"postcss-preset-env": "^7.5.0",
"puppeteer": "^2.1.1",
"qrcode-terminal": "^0.12.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-hot-loader": "^4.12.20",
"regenerator-runtime": "^0.13.5",
"sass": "^1.43.4",
"sass-loader": "^9.0.3",
"source-map-loader": "^1.1.3",
"style-loader": "^2.0.0",
"sass-loader": "^12.3.0",
"source-map-loader": "^3.0.0",
"style-loader": "^3.3.1",
"tsconfig-paths-webpack-plugin": "^3.2.0",
"typescript": "^3.8.3",
"url-loader": "^4.1.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^4.2.2"
"webpack": "^5.64.4",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.6.0",
"webpack-merge": "^5.8.0"
},
"devDependencies": {
"@stackr23/config-eslint": "^2.0.0",
Expand Down
2 changes: 1 addition & 1 deletion src/test/karma.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ module.exports = (config) => {
// overwrite 'webpack' configuration
webpack: {
...configCommon,
mode: 'development',
mode: process.env.NODE_ENV || 'production',
devtool: 'inline-source-map',
externals: {
domutils: 'true',
Expand Down
20 changes: 14 additions & 6 deletions src/types/react/common.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
// react-svg-loader for ui and icons -> JSX output
// svgo into file-loader for svg assets (content images)
const path = require('path')
const merge = require('webpack-merge')
const { merge } = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { CheckerPlugin } = require('awesome-typescript-loader')
Expand Down Expand Up @@ -37,25 +37,33 @@ const getCommonConfig = (env) =>
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: (loader) => [ require('postcss-preset-env')() ],
postcssOptions: {
plugins: [
[
'postcss-preset-env',
{
// Options
},
],
],
},
},
},
{
loader: 'sass-loader',
query: {
loader: 'sass-loader',
options: {
sourceMap: true,
sassOptions: {
includePaths: [
'./sass',
`${path.basename(PATHS.src)}/sass`,
'./css', // ! compatibility with old setting
// TODO: ? use sass-resource-loader
// TODO: apply @stackr23/stylus
],
},
},
},
// TODO: add stylus-loader and apply @stackr23/stylus
],
},
{
Expand Down
34 changes: 22 additions & 12 deletions src/types/react/develop.config.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const merge = require('webpack-merge')
const { merge } = require('webpack-merge')
const ip = require('ip').address()
const webpack = require('webpack')

Expand All @@ -13,19 +13,29 @@ const getDevelopConfig = () => {
return merge([
{
devServer: {
'public': ip ? `${ip}:${PORT}` : null,
host: process.env.HOST || '0.0.0.0',
port: PORT,
contentBase: PATHS.build,
hot: true,
overlay: {
warnings: false,
errors: true,
host: 'local-ip',
port: PORT,
// contentBase: PATHS.build, // deprecated... substitute not needed!?!?
hot: true,
liveReload: false,
compress: true,
magicHtml: true,
open: true,
historyApiFallback: true,
client: {
logging: 'error',
overlay: {
errors: true,
warnings: false,
},
progress: true,
reconnect: 3,
},
before: stackr23Middlewares,
// before: stackr23Middlewares,
setupExitSignals: true,
},
devtool: 'eval-source-map',
output: {
devtool: 'eval-source-map',
output: {
devtoolModuleFilenameTemplate: 'webpack:///[absolute-resource-path]',
},
plugins: [ new webpack.HotModuleReplacementPlugin() ],
Expand Down
8 changes: 3 additions & 5 deletions src/types/react/index.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const merge = require('webpack-merge')
const { merge } = require('webpack-merge')

const getCommonConfig = require('./common.config')
const getDevelopConfig = require('./develop.config')
Expand All @@ -7,7 +7,7 @@ const mock = require('./mock.config')
const { addEnvVariables } = require('../../utils')

module.exports = (env) => {
addEnvVariables()
// TODO: refactor env/mode usage and config merging
const configCommon = getCommonConfig(env)

if (env === 'production') {
Expand All @@ -17,7 +17,5 @@ module.exports = (env) => {
const developConfig = getDevelopConfig(env)
const configDev = merge(configCommon, developConfig)

return env === 'development_mock'
? merge(configDev, mock.config, addEnvVariables())
: merge(configDev, addEnvVariables())
return merge(configDev, (env === 'development_mock' && mock.config))
}
9 changes: 6 additions & 3 deletions src/types/react/mock.config.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
const merge = require('webpack-merge')
const { merge } = require('webpack-merge')

const utils = require('../../utils')
const getDevelopConfig = require('./develop.config')
const { setEnvVariable } = require('../../utils')

exports.config = merge([ utils.setEnvVariable('process.env.NODE_ENV', 'mock') ])
setEnvVariable('process.env.NODE_ENV', 'mock')

exports.config = merge(getDevelopConfig('development_mock'))
8 changes: 5 additions & 3 deletions src/types/react/production.config.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
const merge = require('webpack-merge')
const { merge } = require('webpack-merge')

const { setEnvVariable } = require('../../utils')
const { PATHS } = require('../../constants')


setEnvVariable('process.env.NODE_ENV', 'production')

exports.config = merge([
{
output: {
Expand All @@ -14,13 +17,12 @@ exports.config = merge([
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
defaultVendors: {
test: /[\\/]node_modules[\\/]/,
priority: 1,
},
},
},
},
},
setEnvVariable('process.env.NODE_ENV', 'production'),
])
12 changes: 3 additions & 9 deletions test/assets/assets.spec.js
Original file line number Diff line number Diff line change
@@ -1,20 +1,14 @@
import * as assets from './index'

console.log('ASSETS:\n')
console.log(assets)

const { chai: { expect }} = global

describe('[Assets] - file-loader', function() {
it('export-default-from as namespace', () => {
// check export-default-from
expect(assets.__esModule).to.be.equal(true) // eslint-disable-line import/namespace
describe('[Assets] - file-loader combined with export-default-from', function() {
it('imported namespace contains asset keys', () => {
// check import - import-namespace combined with export-default-from
expect(assets).to.contain.keys('stackr23_logo')
})

it('output contains \'[path][name]\'', () => {
// check path prefix
it('asset key contains \'/[path]/[name].[ext]\'', () => { // check path prefix
expect(assets.stackr23_logo).to.contain('/assets/stackr23_logo.jpg')
})
})
2 changes: 1 addition & 1 deletion webpack.config.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const merge = require('webpack-merge')
const { merge } = require('webpack-merge')

const configStackR23 = require('./index.js')

Expand Down