david/new-webpack-4-vscode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update to webpack 5

Browse Source
This commit is contained in:
David Meincke
2022-03-20 12:19:19 +01:00
parent f0328e86e4
commit 2fbc30ec2e
16 changed files with 14895 additions and 5864 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+2
View File
@@ -1,3 +1,5 @@
node_modules
prod_dist
dev_dist
prod-dist
dev-dist
.vscode/launch.json
Vendored
+10 -10
View File
@@ -5,22 +5,22 @@
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"command": "npm install",
"name": "1. Install NPM packages (first time only)",
"program": "${workspaceFolder}/BuildScripts/install-npm-packages.js"
"request": "launch",
"type": "node-terminal"
},
{
"type": "node",
"request": "launch",
"command": "npm run server",
"name": "2. Start server (w. hot)",
"program": "${workspaceFolder}/BuildScripts/start-webpack-dev-server.js"
"request": "launch",
"type": "node-terminal"
},
{
"type": "node",
"request": "launch",
"command": "npm run production",
"name": "3. Build for production",
"program": "${workspaceFolder}/BuildScripts/output-production.js"
}
"request": "launch",
"type": "node-terminal"
},
]
}
BuildScripts/install-npm-packages.js
-13
View File
@@ -1,13 +0,0 @@
var exec = require('child_process').exec;
console.log("Installing NPM packages");
exec('npm install',
function (error, stdout, stderr) {
if (error !== null) {
console.error("ERROR installing NPM packages", error);
}
else {
console.error("Successfully installed NPM packages", stdout, stderr);
}
});
BuildScripts/output-production.js
-6
View File
@@ -1,6 +0,0 @@
const open = require("open");
const runScript = require("./run-npm-script");
runScript("production", () => {
console.log('Successful output to "prod-dist" folder');
});
BuildScripts/run-npm-script.js
-34
View File
@@ -1,34 +0,0 @@
const npm = require("npm");
module.exports = function(scriptName, onSuccess, onError) {
npm.load(function(err) {
console.log('Running npm script: "' + scriptName + '"');
npm.commands.run([scriptName], function(error, data) {
if (error) {
console.error('Npm script: "' + scriptName + '" error', error);
if (data) {
console.log(data);
}
if (onError) {
onError(error);
}
}
else {
console.log('Npm script: "' + scriptName + '" ran successfully');
if (onSuccess) {
onSuccess(data);
}
}
});
npm.on('log', function(message) {
console.log('Npm script: "' + scriptName + '" log', message);
});
});
}
BuildScripts/start-webpack-dev-server.js
-6
View File
@@ -1,6 +0,0 @@
const open = require("open");
const runScript = require("./run-npm-script");
runScript("server", () => {
open("http://localhost:8020");
});
dev-dist/index.html
-20
View File
@@ -1,20 +0,0 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" id="master-viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Title">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Title</title>
<link rel="manifest" href="manifest.json?v=1">
<base href="/" />
</head>
<body>
<script type="text/javascript" src="/main.js?v=1"></script>
</body>
</html>
dev-dist/main.js
-158
View File
File diff suppressed because one or more lines are too long
index.html
-1
View File
@@ -9,7 +9,6 @@
<title>Title</title>
<link rel="manifest" href="manifest.json?v=1">
<base href="/" />
</head>
package-lock.json
Generated
+14819 -5543
View File
File diff suppressed because it is too large Load Diff
package.json
+22 -21
View File
@@ -1,40 +1,41 @@
{
"version": "0.0.2",
"version": "0.0.3",
"name": "webpackapp",
"description": "webpack app",
"license": "0BSD",
"repository": {},
"scripts": {
"webpack": "webpack --config webpack.dev.js --display-error-details",
"dev": "webpack --config webpack.dev.js --display-error-details",
"webpack": "webpack --config webpack.dev.js",
"dev": "webpack --config webpack.dev.js",
"server": "webpack-dev-server --port 8020 --open --config webpack.dev.js",
"production": "webpack --config webpack.prod.js"
},
"dependencies": {},
"devDependencies": {
"@webcomponents/custom-elements": "1.4.1",
"@babel/core": "7.10.4",
"babel-loader": "8.1.0",
"@webcomponents/custom-elements": "1.5.0",
"@babel/core": "7.17.8",
"babel-loader": "8.2.3",
"babel-plugin-transform-custom-element-classes": "0.1.0",
"babel-preset-env": "1.7.0",
"copy-webpack-plugin": "6.0.3",
"css-loader": "3.6.0",
"extract-text-webpack-plugin": "3.0.2",
"replace-in-file-webpack-plugin": "1.0.6",
"file-loader": "6.0.0",
"file-loader": "6.2.0",
"gulp": "4.0.2",
"html-loader": "1.1.0",
"less": "3.12.0",
"less-loader": "6.2.0",
"npm": "6.14.6",
"open": "7.0.4",
"less": "4.1.2",
"npm": "8.5.5",
"open": "8.4.0",
"path": "0.12.7",
"style-loader": "1.2.1",
"ts-loader": "8.0.0",
"webpack": "4.43.0",
"webpack-cli": "3.3.12",
"webpack-dev-server": "3.11.0",
"webpack-merge": "5.0.9",
"typescript": "3.9.6"
"webpack": "5.70.0",
"webpack-cli": "4.9.2",
"webpack-dev-server": "4.7.4",
"webpack-merge": "5.8.0",
"typescript": "4.6.2",
"copy-webpack-plugin": "^10.2.4",
"html-loader": "3.1.0",
"css-loader": "6.7.1",
"less-loader": "10.2.0",
"style-loader": "3.3.1",
"ts-loader": "9.2.8"
}
}
prod-dist/index.html
-20
View File
@@ -1,20 +0,0 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" id="master-viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Title">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Title</title>
<link rel="manifest" href="manifest.json?v=1594724988454">
<base href="/" />
</head>
<body>
<script type="text/javascript" src="/main.js?v=1594724988454"></script>
</body>
</html>
prod-dist/main.js
-1
View File
@@ -1 +0,0 @@
!function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(r,o,function(n){return e[n]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="/",t(t.s=1)}([function(e,n){e.exports="<div>App running</div>"},function(e,n,t){"use strict";t.r(n);t(2);var r=t(0),o=t.n(r),i=document.createElement("app-root");i.innerHTML=o.a,document.body.appendChild(i)},function(e,n,t){var r=t(3),o=t(4);"string"==typeof(o=o.__esModule?o.default:o)&&(o=[[e.i,o,""]]);var i={insert:"head",singleton:!1};r(o,i);e.exports=o.locals||{}},function(e,n,t){"use strict";var r,o=function(){return void 0===r&&(r=Boolean(window&&document&&document.all&&!window.atob)),r},i=function(){var e={};return function(n){if(void 0===e[n]){var t=document.querySelector(n);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}e[n]=t}return e[n]}}(),a=[];function c(e){for(var n=-1,t=0;t<a.length;t++)if(a[t].identifier===e){n=t;break}return n}function u(e,n){for(var t={},r=[],o=0;o<e.length;o++){var i=e[o],u=n.base?i[0]+n.base:i[0],s=t[u]||0,f="".concat(u," ").concat(s);t[u]=s+1;var l=c(f),d={css:i[1],media:i[2],sourceMap:i[3]};-1!==l?(a[l].references++,a[l].updater(d)):a.push({identifier:f,updater:h(d,n),references:1}),r.push(f)}return r}function s(e){var n=document.createElement("style"),r=e.attributes||{};if(void 0===r.nonce){var o=t.nc;o&&(r.nonce=o)}if(Object.keys(r).forEach((function(e){n.setAttribute(e,r[e])})),"function"==typeof e.insert)e.insert(n);else{var a=i(e.insert||"head");if(!a)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");a.appendChild(n)}return n}var f,l=(f=[],function(e,n){return f[e]=n,f.filter(Boolean).join("\n")});function d(e,n,t,r){var o=t?"":r.media?"@media ".concat(r.media," {").concat(r.css,"}"):r.css;if(e.styleSheet)e.styleSheet.cssText=l(n,o);else{var i=document.createTextNode(o),a=e.childNodes;a[n]&&e.removeChild(a[n]),a.length?e.insertBefore(i,a[n]):e.appendChild(i)}}function p(e,n,t){var r=t.css,o=t.media,i=t.sourceMap;if(o?e.setAttribute("media",o):e.removeAttribute("media"),i&&btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}var v=null,m=0;function h(e,n){var t,r,o;if(n.singleton){var i=m++;t=v||(v=s(n)),r=d.bind(null,t,i,!1),o=d.bind(null,t,i,!0)}else t=s(n),r=p.bind(null,t,n),o=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)};return r(e),function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap)return;r(e=n)}else o()}}e.exports=function(e,n){(n=n||{}).singleton||"boolean"==typeof n.singleton||(n.singleton=o());var t=u(e=e||[],n);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var r=0;r<t.length;r++){var o=c(t[r]);a[o].references--}for(var i=u(e,n),s=0;s<t.length;s++){var f=c(t[s]);0===a[f].references&&(a[f].updater(),a.splice(f,1))}t=i}}}},function(e,n,t){(n=t(5)(!1)).push([e.i,"body {\n background: aqua;\n}\n",""]),e.exports=n},function(e,n,t){"use strict";e.exports=function(e){var n=[];return n.toString=function(){return this.map((function(n){var t=function(e,n){var t=e[1]||"",r=e[3];if(!r)return t;if(n&&"function"==typeof btoa){var o=(a=r,c=btoa(unescape(encodeURIComponent(JSON.stringify(a)))),u="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(c),"/*# ".concat(u," */")),i=r.sources.map((function(e){return"/*# sourceURL=".concat(r.sourceRoot||"").concat(e," */")}));return[t].concat(i).concat([o]).join("\n")}var a,c,u;return[t].join("\n")}(n,e);return n[2]?"@media ".concat(n[2]," {").concat(t,"}"):t})).join("")},n.i=function(e,t,r){"string"==typeof e&&(e=[[null,e,""]]);var o={};if(r)for(var i=0;i<this.length;i++){var a=this[i][0];null!=a&&(o[a]=!0)}for(var c=0;c<e.length;c++){var u=[].concat(e[c]);r&&o[u[0]]||(t&&(u[2]?u[2]="".concat(t," and ").concat(u[2]):u[2]=t),n.push(u))}},n}}]);
tsconfig.json
+10 -1
View File
@@ -11,6 +11,15 @@
"types": [ ],
"allowJs": true
},
"exclude": [ "bin", "BuildScripts", "node_modules", "webpack.common.js", "webpack.dev.js", "webpack.prod.js" ],
"exclude": [
"dev-dist",
"prod-dist",
"bin",
"BuildScripts",
"node_modules",
"webpack.common.js",
"webpack.dev.js",
"webpack.prod.js"
],
"atom": { "rewriteTsconfig": false }
}
webpack.dev.js
+4 -2
View File
@@ -13,7 +13,9 @@ module.exports = merge(common, {
filename: 'main.js'
},
devServer: {
contentBase: './' + devFolderName,
static: {
directory: path.join(__dirname, devFolderName),
},
historyApiFallback: true
},
plugins: [
@@ -22,7 +24,7 @@ module.exports = merge(common, {
patterns: [
{
from: path.resolve(__dirname, 'index.html'),
to: path.resolve(__dirname, devFolderName, '[name].[ext]')
to: path.resolve(__dirname, devFolderName, '[name][ext]')
}
]
}
webpack.prod.js
+1 -1
View File
@@ -34,7 +34,7 @@ module.exports = merge(common, {
patterns: [
{
from: path.resolve(__dirname, 'index.html'),
to: path.resolve(__dirname, prodFolderName, '[name].[ext]')
to: path.resolve(__dirname, prodFolderName, '[name][ext]')
}
]
}