Visual Console Client: huge improvements on the webpack loaders

Former-commit-id: b374944088b36cbe6db066bfb56f4597b464cadc
This commit is contained in:
Alejandro Gallardo Escobar 2019-03-05 16:14:39 +01:00
parent cb04947ca2
commit d6028b809e
3 changed files with 169 additions and 10 deletions

View File

@ -1364,6 +1364,17 @@
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
"integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
},
"cosmiconfig": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-4.0.0.tgz",
"integrity": "sha512-6e5vDdrXZD+t5v0L8CrurPeybg4Fmf+FCSYxXKYVAqLUtyCSbuyqE059d0kDthTNRzKVjL7QMgNpEUlsoYH3iQ==",
"requires": {
"is-directory": "^0.3.1",
"js-yaml": "^3.9.0",
"parse-json": "^4.0.0",
"require-from-string": "^2.0.1"
}
},
"create-ecdh": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.3.tgz",
@ -3393,6 +3404,14 @@
"resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
"integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg=="
},
"import-cwd": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
"integrity": "sha1-qmzzbnInYShcs3HsZRn1PiQ1sKk=",
"requires": {
"import-from": "^2.1.0"
}
},
"import-fresh": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.0.0.tgz",
@ -3402,6 +3421,21 @@
"resolve-from": "^4.0.0"
}
},
"import-from": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/import-from/-/import-from-2.1.0.tgz",
"integrity": "sha1-M1238qev/VOqpHHUuAId7ja387E=",
"requires": {
"resolve-from": "^3.0.0"
},
"dependencies": {
"resolve-from": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
"integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
}
}
},
"import-local": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz",
@ -3613,6 +3647,11 @@
}
}
},
"is-directory": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz",
"integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE="
},
"is-extendable": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
@ -4649,6 +4688,16 @@
"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
"integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ=="
},
"mini-css-extract-plugin": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz",
"integrity": "sha512-IuaLjruM0vMKhUUT51fQdQzBYTX49dLj8w68ALEAe2A4iYNpIC4eMac67mt3NzycvjOlf07/kYxJDc0RTl1Wqw==",
"requires": {
"loader-utils": "^1.1.0",
"schema-utils": "^1.0.0",
"webpack-sources": "^1.1.0"
}
},
"minimalistic-assert": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@ -5353,6 +5402,26 @@
}
}
},
"postcss-load-config": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.0.0.tgz",
"integrity": "sha512-V5JBLzw406BB8UIfsAWSK2KSwIJ5yoEIVFb4gVkXci0QdKgA24jLmHZ/ghe/GgX0lJ0/D1uUK1ejhzEY94MChQ==",
"requires": {
"cosmiconfig": "^4.0.0",
"import-cwd": "^2.0.0"
}
},
"postcss-loader": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-3.0.0.tgz",
"integrity": "sha512-cLWoDEY5OwHcAjDnkyRQzAXfs2jrKjXpO/HQFcc5b5u/r7aa471wdmChmwfnv7x2u840iat/wi0lQ5nbRgSkUA==",
"requires": {
"loader-utils": "^1.1.0",
"postcss": "^7.0.0",
"postcss-load-config": "^2.0.0",
"schema-utils": "^1.0.0"
}
},
"postcss-modules-extract-imports": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz",
@ -5761,6 +5830,11 @@
"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
"integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I="
},
"require-from-string": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
"integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw=="
},
"require-main-filename": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
@ -6979,6 +7053,23 @@
}
}
},
"url-loader": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/url-loader/-/url-loader-1.1.2.tgz",
"integrity": "sha512-dXHkKmw8FhPqu8asTc1puBfe3TehOCo2+RmOOev5suNCIYBcT626kxiWg1NBVkwc4rO8BGa7gP70W7VXuqHrjg==",
"requires": {
"loader-utils": "^1.1.0",
"mime": "^2.0.3",
"schema-utils": "^1.0.0"
},
"dependencies": {
"mime": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/mime/-/mime-2.4.0.tgz",
"integrity": "sha512-ikBcWwyqXQSHKtciCcctu9YfPbFYZ4+gbHEmE0Q8jzcTYQg5dHCr3g2wwAZjPoJfQVXZq6KXAjpXOTf5/cjT7w=="
}
}
},
"url-parse": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.4.tgz",

View File

@ -3,9 +3,9 @@
"version": "1.0.0",
"description": "Visual Console",
"scripts": {
"build": "webpack --mode=production",
"build:dev": "webpack --mode=development",
"build:watch": "webpack --mode=development --watch",
"build": "NODE_ENV=production webpack",
"build:dev": "NODE_ENV=NODE_ENV=production webpack",
"build:watch": "NODE_ENV=NODE_ENV=production webpack --watch",
"format": "prettier",
"lint": "eslint \"src/**/*.ts\"",
"start": "webpack-dev-server --color --mode=development",
@ -34,9 +34,12 @@
"eslint-plugin-prettier": "^3.0.1",
"file-loader": "^3.0.1",
"jest": "^24.1.0",
"mini-css-extract-plugin": "^0.5.0",
"postcss-loader": "^3.0.0",
"prettier": "^1.16.1",
"ts-jest": "^24.0.0",
"typescript": "^3.3.3333",
"url-loader": "^1.1.2",
"webpack": "^4.29.5",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.2.1"

View File

@ -1,24 +1,89 @@
// eslint-disable-next-line @typescript-eslint/no-var-requires
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const dev = process.env.NODE_ENV !== "production";
module.exports = {
mode: process.env.NODE_ENV,
entry: __dirname + "/src/index.ts",
mode: dev ? "development" : "production",
entry: __dirname + "/src/index.ts", // Start from this file.
output: {
path: __dirname + "/dist", // The files will be created here.
filename: dev
? "visual-console-client.min.js"
: "visual-console-client.[hash].min.js",
publicPath: dev ? "" : "pandora_console/include/visual_console/"
},
devtool: "source-map",
resolve: {
extensions: [".ts", ".js", ".json"]
},
module: {
rules: [
// Loader for the Typescript compiler.
{
test: /\.ts$/,
loader: "awesome-typescript-loader"
},
// This loader builds a main CSS file from all the CSS imports across the files.
{
test: /\.css$/,
loader: [
// https://github.com/webpack-contrib/mini-css-extract-plugin
{
loader: MiniCssExtractPlugin.loader,
options: {
hot: true, // if you want HMR - we try to automatically inject hot reloading but if it's not working, add it to the config
reloadAll: true // when desperation kicks in - this is a brute force HMR flag
}
},
// https://webpack.js.org/loaders/css-loader
{
loader: "css-loader",
options: {
sourceMap: true
}
},
// To post process CSS and add some things like prefixes to the rules. e.g.: -webkit-...
// https://github.com/postcss/postcss-loader
{
loader: "postcss-loader",
options: {
plugins: () => [
// To improve the support for old browsers.
require("autoprefixer")({
browsers: ["> 1%", "last 2 versions"]
})
]
}
}
]
},
// To allow the use of file imports. The imported files are transformed into
// data uris if they are small enough or it returns a path to the file.
// https://webpack.js.org/loaders/url-loader
{
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
loader: "url-loader",
options: {
limit: 10000
}
}
]
},
output: {
path: __dirname + "/dist",
filename: "visual-console.bundle.js"
},
plugins: [
// Options for the plugin which extract the CSS files to build a main file.
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: dev
? "visual-console-client.css"
: "visual-console-client.[hash].css",
// Disable to remove warnings about conflicting order between imports.
orderWarning: true
})
],
// Static server which runs the playground on npm start.
devServer: {
open: true,
contentBase: "static"
contentBase: "playground"
}
};