wlxsp
/
test1
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Unifies extension & UI builds 

Uses webpack for all of it
main
Eric Amodio 6 years ago
parent
867001dc60
commit
67cb510334
6 changed files with 307 additions and 262 deletions
Split View
  1. +8
    -14
      .vscode/launch.json
  2. +84
    -65
      .vscode/tasks.json
  3. +21
    -7
      package-lock.json
  4. +10
    -12
      package.json
  5. +0
    -155
      ui.webpack.config.js
  6. +184
    -9
      webpack.config.js

+ 8
- 14
.vscode/launch.json View File

@ -7,29 +7,23 @@
"type": "extensionHost",
"request": "launch",
"runtimeExecutable": "${execPath}",
"args": [
"--extensionDevelopmentPath=${workspaceRoot}"
],
"args": ["--extensionDevelopmentPath=${workspaceRoot}"],
"stopOnEntry": false,
"smartStep": true,
"sourceMaps": true,
"outFiles": [
"${workspaceRoot}/out/**/*.js"
]
"outFiles": ["${workspaceRoot}/out/**/*.js"]
},
{
"name": "Watch & Launch GitLens",
"type": "extensionHost",
"request": "launch",
"runtimeExecutable": "${execPath}",
"args": [
"--extensionDevelopmentPath=${workspaceRoot}"
],
"args": ["--extensionDevelopmentPath=${workspaceRoot}"],
"smartStep": true,
"stopOnEntry": false,
"sourceMaps": true,
"outFiles": [
"${workspaceRoot}/out/**/*.js"
],
"preLaunchTask": "watch"
"outFiles": ["${workspaceRoot}/out/**/*.js"],
"preLaunchTask": "npm: watch"
}
]
}
}

+ 84
- 65
.vscode/tasks.json View File

@ -21,46 +21,44 @@
"script": "build",
"group": "build",
"problemMatcher": [
"$tsc",
"$tslint5"
],
},
{
"type": "npm",
"script": "lint",
"group": "build",
"problemMatcher": [
"$tslint5"
]
},
{
"type": "npm",
"script": "rebuild",
"problemMatcher": [
"$tsc",
"$tslint5"
],
"group": "build"
},
{
"type": "npm",
"script": "watch",
"group": "build",
"isBackground": true,
"problemMatcher": [
"$tsc-watch"
]
},
{
"type": "npm",
"script": "ui:watch",
"group": "build",
"isBackground": true,
"problemMatcher": [
{
"fileLocation": "absolute",
"owner": "typescript",
"pattern": [
{
"regexp": "\[tsl\] ERROR in (.*)?\((\d+),(\d+)\)",
"file": 1,
"line": 2,
"column": 3
},
{
"regexp": "\s*TS\d+:\s*(.*)",
"message": 1
}
],
"severity": "error",
"source": "ts"
},
{
"fileLocation": "relative",
"owner": "typescript",
"pattern": [
{
"regexp": "WARNING in (.*)",
"file": 1
},
{
"regexp": "Module Warning (.*)"
},
{
"regexp": "\[(\d+), (\d+)\]: (.*)",
"line": 1,
"column": 2,
"message": 3
}
],
"severity": "warning",
"source": "tslint",
"background": {
"activeOnStart": true,
"beginsPattern": {
@ -69,39 +67,42 @@
"endsPattern": {
"regexp": "Built at\:(.*)"
}
},
"pattern": [
{
"regexp": "ERROR in \[at-loader\] ([^:]*):(\d+):(\d+)",
"file": 1,
"line": 2,
"column": 3
},
{
"regexp": "TS(.*)",
"message": 1
}
]
}
}
]
},
{
"label": "watch",
"dependsOn": [
"npm: ui:watch",
"npm: watch"
],
"type": "npm",
"script": "lint",
"group": "build",
"problemMatcher": ["$tslint5"]
},
{
"type": "npm",
"script": "watch",
"group": {
"kind": "build",
"isDefault": true
},
"isBackground": true,
"problemMatcher": [
"$tsc-watch",
{
"fileLocation": "absolute",
"owner": "typescript",
"pattern": [
{
"regexp": "\[tsl\] ERROR in (.*)?\((\d+),(\d+)\)",
"file": 1,
"line": 2,
"column": 3
},
{
"regexp": "\s*TS\d+:\s*(.*)",
"message": 1
}
],
"severity": "error",
"fileLocation": "relative",
"source": "ts",
"background": {
"activeOnStart": true,
"beginsPattern": {
@ -110,21 +111,39 @@
"endsPattern": {
"regexp": "Built at\:(.*)"
}
},
}
},
{
"fileLocation": "relative",
"owner": "typescript",
"pattern": [
{
"regexp": "ERROR in \[at-loader\] ([^:]*):(\d+):(\d+)",
"file": 1,
"line": 2,
"column": 3
"regexp": "WARNING in (.*)",
"file": 1
},
{
"regexp": "TS(.*)",
"message": 1
"regexp": "Module Warning (.*)"
},
{
"regexp": "\[(\d+), (\d+)\]: (.*)",
"line": 1,
"column": 2,
"message": 3
}
],
"severity": "warning",
"source": "tslint",
"background": {
"activeOnStart": true,
"beginsPattern": {
"regexp": "webpack is watching the files..."
},
"endsPattern": {
"regexp": "Built at\:(.*)"
}
]
}
}
]
}
]
}
}

+ 21
- 7
package-lock.json View File

@ -9074,16 +9074,17 @@
}
},
"sass-loader": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-7.0.3.tgz",
"integrity": "sha512-iaSFtQcGo4SSgDw5Aes5p4VTrA5jCGSA7sGmhPIcOloBlgI1VktM2MUrk2IHHjbNagckXlPz+HWq1vAAPrcYxA==",
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-7.1.0.tgz",
"integrity": "sha512-+G+BKGglmZM2GUSfT9TLuEp6tzehHPjAMoRRItOojWIqIGPloVCMhNIQuG639eJ+y033PaGTSjLaTHts8Kw79w==",
"dev": true,
"requires": {
"clone-deep": "^2.0.1",
"loader-utils": "^1.0.1",
"lodash.tail": "^4.1.1",
"neo-async": "^2.5.0",
"pify": "^3.0.0"
"pify": "^3.0.0",
"semver": "^5.5.0"
}
},
"sax": {
@ -10398,6 +10399,19 @@
}
}
},
"tslint-loader": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/tslint-loader/-/tslint-loader-3.6.0.tgz",
"integrity": "sha512-Me9Qf/87BOfCY8uJJw+J7VMF4U8WiMXKLhKKKugMydF0xMhMOt9wo2mjYTNhwbF9H7SHh8PAIwRG8roisTNekQ==",
"dev": true,
"requires": {
"loader-utils": "^1.0.2",
"mkdirp": "^0.5.1",
"object-assign": "^4.1.1",
"rimraf": "^2.4.4",
"semver": "^5.3.0"
}
},
"tslint-prettiest": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/tslint-prettiest/-/tslint-prettiest-0.0.1.tgz",
@ -11030,9 +11044,9 @@
}
},
"webpack": {
"version": "4.16.3",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-4.16.3.tgz",
"integrity": "sha512-3VcrVoFgzSz1IYgga71YpU3HO89Al5bSnDOj9RJQPsy+FNyI1sFsUyJITn3pktNuaRBlQT0usvKZE3GgkPGAIw==",
"version": "4.16.5",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-4.16.5.tgz",
"integrity": "sha512-i5cHYHonzSc1zBuwB5MSzW4v9cScZFbprkHK8ZgzPDCRkQXGGpYzPmJhbus5bOrZ0tXTcQp+xyImRSvKb0b+Kw==",
"dev": true,
"requires": {
"@webassemblyjs/ast": "1.5.13",

+ 10
- 12
package.json View File

@ -3533,21 +3533,18 @@
}
},
"scripts": {
"build": "npm run lint && tsc -m commonjs -p ./ && npm run ui:build",
"bundle": "npm run lint && webpack --env.production && npm run ui:bundle",
"build": "webpack --env.development",
"bundle": "webpack --env.production",
"clean": "git clean -Xdf",
"lint": "tslint --project tsconfig.json && npm run ui:lint",
"lint": "tslint --project tsconfig.json && tslint --project ui.tsconfig.json",
"pack": "vsce package",
"pretty": "prettier --config .prettierrc --loglevel warn --write \"./**/*.ts\" && tslint --project tsconfig.json --fix && tslint --project ui.tsconfig.json --fix",
"pub": "vsce publish",
"rebuild": "npm run reset && npm run lint && tsc -m commonjs -p ./ && npm run ui:build",
"rebuild": "npm run reset && npm run build",
"reset": "npm run clean && npm install --no-save",
"watch": "tsc -watch -m commonjs -p ./",
"ui:build": "webpack --config ./ui.webpack.config.js",
"ui:bundle": "webpack --env.production --config ./ui.webpack.config.js",
"ui:lint": "tslint --project ui.tsconfig.json",
"ui:optimize": "webpack --env.optimizeImages --config ./ui.webpack.config.js",
"ui:watch": "webpack --watch --config ./ui.webpack.config.js",
"watch": "webpack --watch --env.development",
"ui:optimize": "webpack --config-name ui --env.optimizeImages",
"ui:watch": "webpack --watch --config-name ui --env.development",
"postinstall": "node ./node_modules/vscode/bin/install",
"prepush": "npm run build",
"vscode:prepublish": "npm run reset && npm run bundle"
@ -3574,14 +3571,15 @@
"mini-css-extract-plugin": "0.4.1",
"node-sass": "4.9.2",
"prettier": "1.14.0",
"sass-loader": "7.0.3",
"sass-loader": "7.1.0",
"style-loader": "0.21.0",
"tslint": "5.11.0",
"tslint-loader": "3.6.0",
"tslint-prettiest": "0.0.1",
"ts-loader": "4.4.2",
"typescript": "3.0.1",
"vscode": "1.1.18",
"webpack": "4.16.3",
"webpack": "4.16.5",
"webpack-cli": "3.1.0",
"webpack-node-externals": "1.7.2"
}

+ 0
- 155
ui.webpack.config.js View File

@ -1,155 +0,0 @@
'use strict';
const glob = require('glob');
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = function(env, argv) {
env = env || {};
const production = !!env.production;
const optimizeImages = production || !!env.optimizeImages;
const clean = [];
if (optimizeImages) {
console.log('Optimizing images (src/ui/images/settings/*.png)...');
clean.push('images/settings');
}
const plugins = [
new CleanWebpackPlugin(clean),
new MiniCssExtractPlugin({
filename: '[name].css'
}),
new HtmlWebpackPlugin({
excludeAssets: [/.*\.main\.js/],
excludeChunks: ['welcome'],
template: 'settings/index.html',
filename: path.resolve(__dirname, 'settings.html'),
inject: true,
inlineSource: production ? '.(js|css)$' : undefined,
// inlineSource: '.(js|css)$',
minify: production
? {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true
}
: false
}),
new HtmlWebpackPlugin({
excludeAssets: [/.*\.main\.js/],
excludeChunks: ['settings'],
template: 'welcome/index.html',
filename: path.resolve(__dirname, 'welcome.html'),
inject: true,
inlineSource: production ? '.(js|css)$' : undefined,
// inlineSource: '.(js|css)$',
minify: production
? {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true
}
: false
}),
new HtmlWebpackInlineSourcePlugin(),
new ImageminPlugin({
disable: !optimizeImages,
externalImages: {
context: path.resolve(__dirname, 'src/ui/images'),
sources: glob.sync('src/ui/images/settings/*.png'),
destination: path.resolve(__dirname, 'images')
},
gifsicle: null,
jpegtran: null,
optipng: null,
pngquant: {
quality: '85-100',
speed: production ? 1 : 10
},
svgo: null
})
];
return {
context: path.resolve(__dirname, 'src/ui'),
// This is ugly having main.scss on both bundles, but if it is added separately it will generate a js bundle :(
entry: {
settings: ['./settings/index.ts', './scss/main.scss'],
welcome: ['./welcome/index.ts', './scss/main.scss']
// main: ['./scss/main.scss']
},
mode: production ? 'production' : 'development',
devtool: !production ? 'eval-source-map' : undefined,
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'out/ui'),
publicPath: '{{root}}/out/ui/'
},
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true
}
}
}
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
modules: [path.resolve(__dirname, 'src/ui'), 'node_modules']
},
module: {
rules: [
{
test: /\.tsx?$/,
use: {
loader: 'ts-loader',
options: {
configFile: 'ui.tsconfig.json'
}
},
exclude: /node_modules/
},
{
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: 'css-loader',
options: {
minimize: production,
sourceMap: !production,
url: false
}
},
{
loader: 'sass-loader',
options: {
sourceMap: !production
}
}
],
exclude: /node_modules/
}
]
},
plugins: plugins
};
};

+ 184
- 9
webpack.config.js View File

@ -1,23 +1,35 @@
'use strict';
const path = require('path');
const glob = require('glob');
const nodeExternals = require('webpack-node-externals');
const CleanWebpackPlugin = require("clean-webpack-plugin");
const path = require('path');
const CleanPlugin = require('clean-webpack-plugin');
const HtmlInlineSourcePlugin = require('html-webpack-inline-source-plugin');
const HtmlPlugin = require('html-webpack-plugin');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = function(env, argv) {
env = env || {};
const production = !!env.production;
env.production = !!env.production;
env.optimizeImages = env.production || !!env.optimizeImages;
return [getExtensionConfig(env), getUIConfig(env)];
};
const plugins = [new CleanWebpackPlugin(["out"])];
function getExtensionConfig(env) {
const plugins = [new CleanPlugin(['out'])];
return {
name: 'extension',
entry: './src/extension.ts',
mode: production ? 'production' : 'development',
mode: env.production ? 'production' : 'development',
target: 'node',
devtool: !production ? 'eval-source-map' : undefined,
devtool: !env.production ? 'eval-source-map' : undefined,
output: {
libraryTarget: 'commonjs2',
filename: 'extension.js',
path: path.resolve(__dirname, 'out')
path: path.resolve(__dirname, 'out'),
devtoolModuleFilenameTemplate: 'file:///[absolute-resource-path]'
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
@ -26,12 +38,175 @@ module.exports = function(env, argv) {
module: {
rules: [
{
test: /\.ts$/,
enforce: 'pre',
use: 'tslint-loader'
},
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
plugins: plugins
plugins: plugins,
stats: { all: false, assets: true, builtAt: true, errors: true, timings: true, warnings: true }
};
};
}
function getUIConfig(env) {
const clean = ['settings.html', 'welcome.html'];
if (env.optimizeImages) {
console.log('Optimizing images (src/ui/images/settings/*.png)...');
clean.push('images/settings');
}
const plugins = [
new CleanPlugin(clean),
new MiniCssExtractPlugin({
filename: '[name].css'
}),
new HtmlPlugin({
excludeAssets: [/.*\.main\.js/],
excludeChunks: ['welcome'],
template: 'settings/index.html',
filename: path.resolve(__dirname, 'settings.html'),
inject: true,
inlineSource: env.production ? '.(js|css)$' : undefined,
// inlineSource: '.(js|css)$',
minify: env.production
? {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true
}
: false
}),
new HtmlPlugin({
excludeAssets: [/.*\.main\.js/],
excludeChunks: ['settings'],
template: 'welcome/index.html',
filename: path.resolve(__dirname, 'welcome.html'),
inject: true,
inlineSource: env.production ? '.(js|css)$' : undefined,
// inlineSource: '.(js|css)$',
minify: env.production
? {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true
}
: false
}),
new HtmlInlineSourcePlugin(),
new ImageminPlugin({
disable: !env.optimizeImages,
externalImages: {
context: path.resolve(__dirname, 'src/ui/images'),
sources: glob.sync('src/ui/images/settings/*.png'),
destination: path.resolve(__dirname, 'images')
},
gifsicle: null,
jpegtran: null,
optipng: null,
pngquant: {
quality: '85-100',
speed: env.production ? 1 : 10
},
svgo: null
})
];
return {
name: 'ui',
context: path.resolve(__dirname, 'src/ui'),
// This is ugly having main.scss on both bundles, but if it is added separately it will generate a js bundle :(
entry: {
settings: ['./settings/index.ts', './scss/main.scss'],
welcome: ['./welcome/index.ts', './scss/main.scss']
// main: ['./scss/main.scss']
},
mode: env.production ? 'production' : 'development',
devtool: !env.production ? 'eval-source-map' : undefined,
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'out/ui'),
publicPath: '{{root}}/out/ui/'
},
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true
}
}
}
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
modules: [path.resolve(__dirname, 'src/ui'), 'node_modules']
},
module: {
rules: [
{
test: /\.ts$/,
enforce: 'pre',
use: [
{
loader: 'tslint-loader',
options: {
tsConfigFile: 'ui.tsconfig.json'
}
}
]
},
{
test: /\.tsx?$/,
use: {
loader: 'ts-loader',
options: {
configFile: 'ui.tsconfig.json'
}
},
exclude: /node_modules/
},
{
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: 'css-loader',
options: {
minimize: env.production,
sourceMap: !env.production,
url: false
}
},
{
loader: 'sass-loader',
options: {
sourceMap: !env.production
}
}
],
exclude: /node_modules/
}
]
},
plugins: plugins,
stats: { all: false, assets: true, builtAt: true, errors: true, timings: true, warnings: true }
};
}

Write Preview
||||||
​x
 
​
000:0
Loading…
Cancel
Save