Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@vanbasten17
vanbasten17 committed Dec 13, 2020
1 parent 37747dc commit 2caa744
Show file tree
Hide file tree
Showing 2 changed files with 100 additions and 78 deletions.
2 changes: 1 addition & 1 deletion blank/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
"style-loader": "^2.0.0",
"terser": "^5.5.1",
"terser-webpack-plugin": "^5.0.3",
"webpack": "^5.9.0",
"webpack": "^5.10.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^4.0.0-beta.0"
}
Expand Down
176 changes: 99 additions & 77 deletions blank/webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,50 +11,65 @@ const root = path.resolve(__dirname, 'src')
const botonicPath = path.resolve(__dirname, 'node_modules', '@botonic', 'react')

const terserPlugin = new TerserPlugin({
// TODO: configure sourceMaps not working
parallel: true,
// sourceMap: true,
terserOptions: {
keep_fnames: true,
},
})

const MODE_DEV = 'development'
const MODE_PROD = 'production'
const WEBPACK_MODE = {
DEVELOPMENT: 'development',
PRODUCTION: 'production',
}

const BOTONIC_TARGETS = {
ALL: 'all',
DEV: 'dev',
NODE: 'node',
WEBVIEWS: 'webviews',
WEBCHAT: 'webchat',
}

const WEBPACK_ENTRIES = {
DIR: 'webpack-entries',
DEV: 'dev-entry.js',
NODE: 'node-entry.js',
WEBCHAT: 'webchat-entry.js',
WEBVIEWS: 'webviews-entry.js',
}

const TEMPLATES = {
WEBCHAT: 'webchat.template.html',
WEBVIEWS: 'webview.template.html',
}

const DO_NOT_TRANSPILE = /node_modules\/(?!@botonic)/
const UMD_LIBRARY_TARGET = 'umd'
const BOTONIC_LIBRARY_NAME = 'Botonic'
const WEBCHAT_FILENAME = 'webchat.botonic.js'
const BOT_LIBRARY_NAME = 'bot'
const BOT_FILENAME = 'bot.js'
const WEBVIEWS_LIBRARY_NAME = 'BotonicWebview'
const WEBVIEWS_FILENAME = 'webviews.js'
const OUTPUT_PATH = path.resolve(__dirname, 'dist')
const WEBVIEWS_OUTPUT_PATH = path.resolve(OUTPUT_PATH, 'webviews')

function sourceMap(mode) {
// changing it from inline-source-map to cheap-eval-source-map, build time improved from 48s to 40s
if (mode === MODE_PROD) {
// Typescript: "inline-source-map" does not map Typescript correctly but there's a patch I didn't test https://github.com/webpack/webpack/issues/7172#issuecomment-414115819
// from https://webpack.js.org/configuration/devtool/ inline-source-map is slow and not good for production
//return 'cheap-eval-source-map'; // fast builds, not for production, transformed code (lines only)
// slow, good for production. A full SourceMap is emitted as a separate file. but doesn't add a reference comment to the bundle. Useful if you only want SourceMaps to map error stack traces from error reports, but don't want to expose your SourceMap for the browser development tools.
return 'hidden-source-map'
} else if (mode === MODE_DEV) {
// 'eval-source-map' would be a good fit for staging (slow but generates original code)
// from documentation: quick build time, very quick rebuild, transformed code (lines only)
return 'eval-cheap-source-map' //callstacks show links to TS code
} else {
if (mode === WEBPACK_MODE.PRODUCTION) return 'hidden-source-map'
else if (mode === WEBPACK_MODE.DEVELOPMENT) return 'eval-cheap-source-map'
else
throw new Error(
'Invalid mode argument (' + mode + '). See package.json scripts'
)
}
}

const resolveConfig = {
extensions: ['*', '.js', '.jsx', '.ts', '.tsx'],
extensions: ['*', '.js', '.jsx', '.ts', '.tsx', '.mjs'],
}

const babelLoaderConfig = {
test: /\.?(j|t)s?x/,
exclude: /node_modules\/(?!@botonic)/,
test: /\.(js|mjs|jsx|ts|tsx)$/,
exclude: DO_NOT_TRANSPILE,
use: {
loader: 'babel-loader',
options: {
Expand All @@ -70,16 +85,18 @@ const babelLoaderConfig = {
},
}

const fileLoaderConfig = {
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'assets',
function fileLoaderConfig(outputPath) {
return {
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
{
loader: 'file-loader',
options: {
outputPath: outputPath,
},
},
},
],
],
}
}

const nullLoaderConfig = {
Expand Down Expand Up @@ -117,15 +134,20 @@ function botonicDevConfig(mode) {
mode: mode,
devtool: sourceMap(mode),
target: 'web',
entry: path.resolve('webpack-entries', 'dev-entry.js'),
entry: path.resolve(WEBPACK_ENTRIES.DIR, WEBPACK_ENTRIES.DEV),
module: {
rules: [babelLoaderConfig, fileLoaderConfig, stylesLoaderConfig],
rules: [
babelLoaderConfig,
fileLoaderConfig('assets'),
stylesLoaderConfig,
],
},
output: {
filename: 'webchat.botonic.js',
library: 'Botonic',
libraryTarget: 'umd',
filename: WEBCHAT_FILENAME,
library: BOTONIC_LIBRARY_NAME,
libraryTarget: UMD_LIBRARY_TARGET,
libraryExport: 'app',
path: OUTPUT_PATH,
},
resolve: resolveConfig,
devServer: {
Expand All @@ -139,14 +161,17 @@ function botonicDevConfig(mode) {
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(botonicPath, 'src', 'webchat.template.html'),
template: path.resolve(botonicPath, 'src', TEMPLATES.WEBCHAT),
filename: 'index.html',
}),
new webpack.HotModuleReplacementPlugin(),
imageminPlugin,
new webpack.EnvironmentPlugin({
HUBTYPE_API_URL: null,
BOTONIC_TARGET: BOTONIC_TARGETS.DEV,
// new webpack.EnvironmentPlugin({
// HUBTYPE_API_URL: null,
// BOTONIC_TARGET: BOTONIC_TARGETS.DEV,
// }),
new webpack.DefinePlugin({
IS_BROWSER: true,
}),
],
}
Expand All @@ -161,28 +186,32 @@ function botonicWebchatConfig(mode) {
mode: mode,
devtool: sourceMap(mode),
target: 'web',
entry: path.resolve('webpack-entries', 'webchat-entry.js'),
entry: path.resolve(WEBPACK_ENTRIES.DIR, WEBPACK_ENTRIES.WEBCHAT),
module: {
rules: [babelLoaderConfig, fileLoaderConfig, stylesLoaderConfig],
rules: [
babelLoaderConfig,
fileLoaderConfig('assets'),
stylesLoaderConfig,
],
},
output: {
filename: 'webchat.botonic.js',
library: 'Botonic',
libraryTarget: 'umd',
filename: WEBCHAT_FILENAME,
library: BOTONIC_LIBRARY_NAME,
libraryTarget: UMD_LIBRARY_TARGET,
libraryExport: 'app',
publicPath: './',
path: OUTPUT_PATH,
},
resolve: resolveConfig,
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(botonicPath, 'src', 'webchat.template.html'),
template: path.resolve(botonicPath, 'src', TEMPLATES.WEBCHAT),
filename: 'index.html',
}),
imageminPlugin,
new webpack.EnvironmentPlugin({
HUBTYPE_API_URL: null,
WEBCHAT_PUSHER_KEY: null,
BOTONIC_TARGET: 'webchat',
BOTONIC_TARGET: BOTONIC_TARGETS.WEBCHAT,
}),
],
}
Expand All @@ -197,47 +226,37 @@ function botonicWebviewsConfig(mode) {
mode: mode,
devtool: sourceMap(mode),
target: 'web',
entry: path.resolve('webpack-entries', 'webviews-entry.js'),
entry: path.resolve(WEBPACK_ENTRIES.DIR, WEBPACK_ENTRIES.WEBVIEWS),
output: {
path: path.resolve(path.join(__dirname, 'dist', 'webviews')),
filename: 'webviews.js',
library: 'BotonicWebview',
libraryTarget: 'umd',
filename: WEBVIEWS_FILENAME,
library: WEBVIEWS_LIBRARY_NAME,
libraryTarget: UMD_LIBRARY_TARGET,
libraryExport: 'app',
path: WEBVIEWS_OUTPUT_PATH,
},
module: {
rules: [
babelLoaderConfig,
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: '../assets',
},
},
],
},
fileLoaderConfig('../assets'),
stylesLoaderConfig,
],
},
resolve: resolveConfig,
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(botonicPath, 'src', 'webview.template.html'),
template: path.resolve(botonicPath, 'src', TEMPLATES.WEBVIEWS),
filename: 'index.html',
}),
imageminPlugin,
new webpack.EnvironmentPlugin({
HUBTYPE_API_URL: null,
BOTONIC_TARGET: 'webviews',
BOTONIC_TARGET: BOTONIC_TARGETS.WEBVIEWS,
}),
],
}
}

function botonicServerConfig(mode) {
function botonicNodeConfig(mode) {
return {
optimization: {
minimize: true,
Expand All @@ -247,24 +266,27 @@ function botonicServerConfig(mode) {
mode: mode,
devtool: sourceMap(mode),
target: 'node',
entry: path.resolve('webpack-entries', 'node-entry.js'),
entry: path.resolve(WEBPACK_ENTRIES.DIR, WEBPACK_ENTRIES.NODE),
output: {
filename: 'bot.js',
library: 'bot',
libraryTarget: 'umd',
filename: BOT_FILENAME,
library: BOT_LIBRARY_NAME,
libraryTarget: UMD_LIBRARY_TARGET,
libraryExport: 'app',
path: path.resolve('./dist'),
path: OUTPUT_PATH,
},
module: {
rules: [babelLoaderConfig, fileLoaderConfig, nullLoaderConfig],
rules: [babelLoaderConfig, fileLoaderConfig('assets'), nullLoaderConfig],
},
resolve: resolveConfig,
plugins: [
new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: ['dist'] }),
imageminPlugin,
new webpack.EnvironmentPlugin({
HUBTYPE_API_URL: null,
BOTONIC_TARGET: 'node',
// new webpack.EnvironmentPlugin({
// HUBTYPE_API_URL: null,
// BOTONIC_TARGET: 'node',
// }),
new webpack.DefinePlugin({
IS_BROWSER: false,
}),
new CopyPlugin({
patterns: [{ from: 'nlu/models/', to: 'assets/models/' }],
Expand All @@ -274,16 +296,16 @@ function botonicServerConfig(mode) {
}

module.exports = function (env, argv) {
if (env.target === 'all') {
if (env.target === BOTONIC_TARGETS.ALL) {
return [
botonicServerConfig(argv.mode),
botonicNodeConfig(argv.mode),
botonicWebviewsConfig(argv.mode),
botonicWebchatConfig(argv.mode),
]
} else if (env.target === BOTONIC_TARGETS.DEV) {
return [botonicDevConfig(argv.mode)]
} else if (env.target === BOTONIC_TARGETS.NODE) {
return [botonicServerConfig(argv.mode)]
return [botonicNodeConfig(argv.mode)]
} else if (env.target === BOTONIC_TARGETS.WEBVIEWS) {
return [botonicWebviewsConfig(argv.mode)]
} else if (env.target === BOTONIC_TARGETS.WEBCHAT) {
Expand Down

0 comments on commit 2caa744

Please sign in to comment.