Skip to content

Commit

Permalink
chore: upgrade blank to webpack 5
Browse files Browse the repository at this point in the history
  • Loading branch information
@vanbasten17
vanbasten17 committed Dec 3, 2020
1 parent 86b1095 commit b8f3953
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 72 deletions.
70 changes: 35 additions & 35 deletions blank/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
"name": "blank",
"version": "1.0.0",
"scripts": {
"build": "webpack --env.target=all --mode=production",
"start": "webpack-dev-server --env.target=dev --mode=development",
"build": "webpack --env target=all --mode=development",
"start": "webpack serve --env target=dev --mode=development",
"test": "jest",
"train": "node_modules/.bin/ts-node src/nlu/train-model.ts"
},
Expand All @@ -18,41 +18,41 @@
}
},
"dependencies": {
"@babel/runtime": "^7.6.2",
"@botonic/react": "~0.16.0"
"@babel/runtime": "^7.12.5",
"@botonic/react": "0.16.1-alpha.5"
},
"devDependencies": {
"@babel/core": "^7.6.2",
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@babel/plugin-transform-runtime": "^7.6.2",
"@babel/preset-env": "^7.6.2",
"@babel/preset-react": "^7.0.0",
"@hot-loader/react-dom": "^16.7.0",
"babel-jest": "^24.9.0",
"babel-loader": "^8.0.6",
"babel-plugin-add-module-exports": "^1.0.2",
"chokidar": "^3.4.2",
"@babel/core": "^7.12.9",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-transform-runtime": "^7.12.1",
"@babel/preset-env": "^7.12.7",
"@babel/preset-react": "^7.12.7",
"@hot-loader/react-dom": "^17.0.1",
"babel-jest": "^26.6.3",
"babel-loader": "^8.2.2",
"babel-plugin-add-module-exports": "^1.0.4",
"chokidar": "^3.4.3",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.0.5",
"css-loader": "^3.3.0",
"file-loader": "^5.0.2",
"html-webpack-plugin": "^3.2.0",
"imagemin-gifsicle": "^6.0.1",
"imagemin-jpegtran": "^6.0.0",
"imagemin-optipng": "^7.1.0",
"imagemin-svgo": "^7.0.0",
"imagemin-webpack": "^5.1.0",
"jest": "^25.2.0",
"node-sass": "^4.13.0",
"null-loader": "^3.0.0",
"react-hot-loader": "^4.12.18",
"sass": "^1.23.7",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.1",
"terser": "^4.4.2",
"terser-webpack-plugin": "^2.2.2",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
"copy-webpack-plugin": "^6.3.2",
"css-loader": "^5.0.1",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.0.0-alpha.14",
"image-minimizer-webpack-plugin": "^1.0.0",
"imagemin-gifsicle": "^7.0.0",
"imagemin-jpegtran": "^7.0.0",
"imagemin-optipng": "^8.0.0",
"imagemin-svgo": "^8.0.0",
"jest": "^26.6.3",
"node-sass": "^5.0.0",
"null-loader": "^4.0.1",
"react-hot-loader": "^4.13.0",
"sass": "^1.29.0",
"sass-loader": "^10.1.0",
"style-loader": "^2.0.0",
"terser": "^5.5.1",
"terser-webpack-plugin": "^5.0.3",
"webpack": "^5.9.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^4.0.0-beta.0"
}
}
73 changes: 36 additions & 37 deletions blank/webpack.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
const path = require('path')
const ImageminPlugin = require('imagemin-webpack')
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
Expand All @@ -11,8 +11,9 @@ 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,
// sourceMap: true,
terserOptions: {
keep_fnames: true,
},
Expand All @@ -39,7 +40,7 @@ function sourceMap(mode) {
} 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 'cheap-eval-source-map' //callstacks show links to TS code
return 'eval-cheap-source-map' //callstacks show links to TS code
} else {
throw new Error(
'Invalid mode argument (' + mode + '). See package.json scripts'
Expand All @@ -49,36 +50,28 @@ function sourceMap(mode) {

const resolveConfig = {
extensions: ['*', '.js', '.jsx', '.ts', '.tsx'],
alias: {
react: path.resolve(__dirname, 'node_modules', 'react'),
'styled-components': path.resolve(
__dirname,
'node_modules',
'styled-components'
),
},
}

const babelLoaderConfig = {
test: /\.(js|jsx)$/,
exclude: /node_modules[\/\\](?!(@botonic)[\/\\])/,
test: /\.?(j|t)s?x/,
exclude: /node_modules\/(?!@botonic)/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: ['@babel/preset-env', '@babel/react'],
plugins: [
require('@babel/plugin-proposal-object-rest-spread'),
require('@babel/plugin-proposal-class-properties'),
require('babel-plugin-add-module-exports'),
require('@babel/plugin-transform-runtime'),
'@babel/plugin-proposal-object-rest-spread',
'@babel/plugin-proposal-class-properties',
'babel-plugin-add-module-exports',
'@babel/plugin-transform-runtime',
],
},
},
}

const fileLoaderConfig = {
test: /\.(png|svg|jpg|gif)$/,
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
{
loader: 'file-loader',
Expand All @@ -99,24 +92,28 @@ const stylesLoaderConfig = {
use: ['style-loader', 'css-loader', 'sass-loader'],
}

const imageminPlugin = new ImageminPlugin({
bail: false,
cache: false,
imageminOptions: {
const imageminPlugin = new ImageMinimizerPlugin({
minimizerOptions: {
plugins: [
['imagemin-gifsicle', { interlaced: true }],
['imagemin-jpegtran', { progressive: true }],
['imagemin-optipng', { optimizationLevel: 5 }],
['imagemin-svgo', { removeViewBox: true }],
['gifsicle', { interlaced: true }],
['jpegtran', { progressive: true }],
['optipng', { optimizationLevel: 5 }],
[
'svgo',
{
plugins: [
{
removeViewBox: false,
},
],
},
],
],
},
})

function botonicDevConfig(mode) {
return {
optimization: {
minimizer: [terserPlugin],
},
mode: mode,
devtool: sourceMap(mode),
target: 'web',
Expand All @@ -125,22 +122,19 @@ function botonicDevConfig(mode) {
rules: [babelLoaderConfig, fileLoaderConfig, stylesLoaderConfig],
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'webchat.botonic.js',
library: 'Botonic',
libraryTarget: 'umd',
libraryExport: 'app',
publicPath: './',
},
resolve: resolveConfig,
devServer: {
contentBase: [
static: [
path.join(__dirname, 'dist'),
path.join(__dirname, 'src', 'nlu', 'models'),
],
watchContentBase: true,
liveReload: true,
historyApiFallback: true,
publicPath: '/',
hot: true,
},
plugins: [
Expand All @@ -161,6 +155,7 @@ function botonicDevConfig(mode) {
function botonicWebchatConfig(mode) {
return {
optimization: {
minimize: true,
minimizer: [terserPlugin],
},
mode: mode,
Expand All @@ -171,7 +166,6 @@ function botonicWebchatConfig(mode) {
rules: [babelLoaderConfig, fileLoaderConfig, stylesLoaderConfig],
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'webchat.botonic.js',
library: 'Botonic',
libraryTarget: 'umd',
Expand All @@ -197,14 +191,15 @@ function botonicWebchatConfig(mode) {
function botonicWebviewsConfig(mode) {
return {
optimization: {
minimize: true,
minimizer: [terserPlugin],
},
mode: mode,
devtool: sourceMap(mode),
target: 'web',
entry: path.resolve('webpack-entries', 'webviews-entry.js'),
output: {
path: path.resolve(__dirname, 'dist/webviews'),
path: path.resolve(path.join(__dirname, 'dist', 'webviews')),
filename: 'webviews.js',
library: 'BotonicWebview',
libraryTarget: 'umd',
Expand Down Expand Up @@ -245,6 +240,7 @@ function botonicWebviewsConfig(mode) {
function botonicServerConfig(mode) {
return {
optimization: {
minimize: true,
minimizer: [terserPlugin],
},
context: root,
Expand All @@ -257,6 +253,7 @@ function botonicServerConfig(mode) {
library: 'bot',
libraryTarget: 'umd',
libraryExport: 'app',
path: path.resolve('./dist'),
},
module: {
rules: [babelLoaderConfig, fileLoaderConfig, nullLoaderConfig],
Expand All @@ -269,7 +266,9 @@ function botonicServerConfig(mode) {
HUBTYPE_API_URL: null,
BOTONIC_TARGET: 'node',
}),
new CopyPlugin([{ from: 'nlu/models/', to: 'assets/models/' }]),
new CopyPlugin({
patterns: [{ from: 'nlu/models/', to: 'assets/models/' }],
}),
],
}
}
Expand Down

0 comments on commit b8f3953

Please sign in to comment.