Skip to content

Commit

Permalink
feat: migrate to webpack v5 ! BREAKING CHANGE ! (#13)
Browse files Browse the repository at this point in the history
BREAKING CHANGE: for `webpack@4` use `@stackr23/webpack@2`

* deps: upgrade webpack packages
`webpack`, `webpack-cli`, `webpack-dev-server`, `webpack-merge`
* deps: upgrade other webpack releated pckgs
  * webpack-helpers: `copy-webpack-plugin`, `html-webpack-plugin`, `mini-css-extract-plugin`
  * webpack-loaders: `loader-utils`, `css-loader`, `postcss-loader"`, `sass-loader`, `source-map-loader`, `style-loader`
* deps: upgrade `karma-webpack` to v5
* deps: update post-css packages

* refactor(webpack-merge): migrate to new version
* refactor: migrate `post-css` options to v8
* refactor: migrate  options to webpack v5
  * `splitChunks.cacheGroups.vendors` → `splitChunks.cacheGroups.defaultVendors`
  * change `sass-loader`s 'query' key to 'options'
* refactor: remove `addEnvVariables()` in merge fn
  TODO: refactor mode/env (#4)

* config(npm): remove `-p` from webpack commands
* config(test): use `NODE_ENV` in karma.webpack.mode
* config: use minimal eslint setup
* config(sem-rel): add `parserOpts.noteKeywords`
* test(assets): remove __esModule' import test
  • Loading branch information
DoubleU23 authored May 4, 2022
1 parent 7997f42 commit 019487f
Show file tree
Hide file tree
Showing 12 changed files with 2,421 additions and 3,520 deletions.
10 changes: 1 addition & 9 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -1,9 +1 @@
{
"extends": "./node_modules/@stackr23/config-eslint",
"rules": {
"react/jsx-filename-extension": 0,
// conflicts between webpack- and node- resolver
"node/no-missing-import": 0,
"node/no-unpublished-import": 0
}
}
{ "extends": "./node_modules/@stackr23/config-eslint" }
15 changes: 12 additions & 3 deletions .releaserc
Original file line number Diff line number Diff line change
@@ -1,11 +1,20 @@
{
"branches": ["master", "main"],
"branches": [
"master",
"main"
],
"repositoryUrl": "https://github.com/stackr23/webpack",
"plugins": [
[
"@semantic-release/commit-analyzer",
[
"@semantic-release/commit-analyzer",
{
"config": "@stackr23/preset-conventional-changelog",
"parserOpts": {
"noteKeywords": [
"BREAKING CHANGE",
"BREAKING CHANGES"
]
},
"releaseRules": [
{
"type": "feat",
Expand Down
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

0 comments on commit 019487f

Please sign in to comment.