Changeset View
Changeset View
Standalone View
Standalone View
swh/web/assets/config/webpack.config.development.js
Show All 14 Lines | |||||
const RobotstxtPlugin = require('robotstxt-webpack-plugin'); | const RobotstxtPlugin = require('robotstxt-webpack-plugin'); | ||||
const CleanWebpackPlugin = require('clean-webpack-plugin'); | const CleanWebpackPlugin = require('clean-webpack-plugin'); | ||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); | ||||
const FixSwhSourceMapsPlugin = require('./webpack-plugins/fix-swh-source-maps-webpack-plugin'); | const FixSwhSourceMapsPlugin = require('./webpack-plugins/fix-swh-source-maps-webpack-plugin'); | ||||
const CopyWebpackPlugin = require('copy-webpack-plugin'); | const CopyWebpackPlugin = require('copy-webpack-plugin'); | ||||
const GenerateWebLabelsPlugin = require('./webpack-plugins/generate-weblabels-webpack-plugin'); | const GenerateWebLabelsPlugin = require('./webpack-plugins/generate-weblabels-webpack-plugin'); | ||||
const loadedMathJaxJsFiles = require('./mathjax-js-files'); | const loadedMathJaxJsFiles = require('./mathjax-js-files'); | ||||
// are we building unit tests ? | |||||
const testMode = process.env.NODE_ENV === 'test'; | |||||
// are we running webpack-dev-server ? | // are we running webpack-dev-server ? | ||||
const isDevServer = process.argv.find(v => v.includes('webpack-dev-server')); | const isDevServer = process.argv.find(v => v.includes('webpack-dev-server')); | ||||
// webpack-dev-server configuration | // webpack-dev-server configuration | ||||
const devServerPort = 3000; | const devServerPort = 3000; | ||||
const devServerPublicPath = 'http://localhost:' + devServerPort + '/static/'; | const devServerPublicPath = 'http://localhost:' + devServerPort + '/static/'; | ||||
// set publicPath according if we are using webpack-dev-server to serve | // set publicPath according if we are using webpack-dev-server to serve | ||||
// our assets or not | // our assets or not | ||||
const publicPath = isDevServer ? devServerPublicPath : '/static/'; | const publicPath = isDevServer ? devServerPublicPath : '/static/'; | ||||
const nodeModules = path.resolve(__dirname, '../../../../node_modules/'); | const nodeModules = path.resolve(__dirname, '../../../../node_modules/'); | ||||
// collect all bundles we want to produce with webpack | // collect all bundles we want to produce with webpack | ||||
var bundles = {}; | var bundles = {}; | ||||
const bundlesDir = path.join(__dirname, '../src/bundles'); | const bundlesDir = path.join(__dirname, '../src/bundles'); | ||||
fs.readdirSync(bundlesDir).forEach(file => { | fs.readdirSync(bundlesDir).forEach(file => { | ||||
bundles[file] = ['bundles/' + file + '/index.js']; | bundles[file] = ['bundles/' + file + '/index.js']; | ||||
}); | }); | ||||
// common loaders for css related assets (css, sass, less) | // common loaders for css related assets (css, sass, less) | ||||
let cssLoaders = [ | let cssLoaders = [ | ||||
MiniCssExtractPlugin.loader, | |||||
{ | { | ||||
loader: 'cache-loader' | loader: 'cache-loader' | ||||
}, | }, | ||||
{ | { | ||||
loader: 'css-loader', | loader: 'css-loader', | ||||
options: { | options: { | ||||
sourceMap: !isDevServer | sourceMap: !isDevServer | ||||
} | } | ||||
Show All 20 Lines | options: { | ||||
// automatically add vendor prefixes to css rules | // automatically add vendor prefixes to css rules | ||||
require('autoprefixer')(), | require('autoprefixer')(), | ||||
require('postcss-normalize')() | require('postcss-normalize')() | ||||
] | ] | ||||
} | } | ||||
} | } | ||||
]; | ]; | ||||
if (!testMode) { | |||||
cssLoaders.unshift(MiniCssExtractPlugin.loader); | |||||
} | |||||
// webpack development configuration | // webpack development configuration | ||||
module.exports = { | module.exports = { | ||||
// use caching to speedup incremental builds | // use caching to speedup incremental builds | ||||
cache: true, | cache: true, | ||||
// set mode to development | // set mode to development | ||||
mode: 'development', | mode: 'development', | ||||
// use eval source maps when using webpack-dev-server for quick debugging, | // use eval source maps when using webpack-dev-server for quick debugging, | ||||
// otherwise generate source map files (more expensive) | // otherwise generate source map files (more expensive) | ||||
▲ Show 20 Lines • Show All 112 Lines • ▼ Show 20 Lines | rules: [ | ||||
options: '$' | options: '$' | ||||
}] | }] | ||||
}, | }, | ||||
// expose highlightjs to the global context as hljs when importing it | // expose highlightjs to the global context as hljs when importing it | ||||
{ | { | ||||
test: require.resolve('highlight.js'), | test: require.resolve('highlight.js'), | ||||
use: [{ | use: [{ | ||||
loader: 'expose-loader', | loader: 'expose-loader', | ||||
options: 'window.hljs' | |||||
}, { | |||||
loader: 'expose-loader', | |||||
options: 'hljs' | options: 'hljs' | ||||
}] | }] | ||||
}, | }, | ||||
{ | { | ||||
test: require.resolve('js-cookie'), | test: require.resolve('js-cookie'), | ||||
use: [{ | use: [{ | ||||
loader: 'expose-loader', | loader: 'expose-loader', | ||||
options: 'Cookies' | options: 'Cookies' | ||||
▲ Show 20 Lines • Show All 101 Lines • ▼ Show 20 Lines | plugins: [ | ||||
}), | }), | ||||
// for generating the robots.txt file | // for generating the robots.txt file | ||||
new RobotstxtPlugin({ | new RobotstxtPlugin({ | ||||
policy: [{ | policy: [{ | ||||
userAgent: '*', | userAgent: '*', | ||||
disallow: '/api/' | disallow: '/api/' | ||||
}] | }] | ||||
}), | }), | ||||
// for extracting all stylesheets in separate css files | |||||
new MiniCssExtractPlugin({ | |||||
filename: 'css/[name].[chunkhash].css', | |||||
chunkFilename: 'css/[name].[chunkhash].css' | |||||
}), | |||||
// fix generated asset sourcemaps to workaround a Firefox issue | // fix generated asset sourcemaps to workaround a Firefox issue | ||||
new FixSwhSourceMapsPlugin(), | new FixSwhSourceMapsPlugin(), | ||||
// define some global variables accessible from js code | // define some global variables accessible from js code | ||||
new webpack.DefinePlugin({ | new webpack.DefinePlugin({ | ||||
__STATIC__: JSON.stringify(publicPath) | __STATIC__: JSON.stringify(publicPath) | ||||
}), | }), | ||||
// needed in order to use bootstrap 4.x | // needed in order to use bootstrap 4.x | ||||
new webpack.ProvidePlugin({ | new webpack.ProvidePlugin({ | ||||
Show All 10 Lines | new webpack.ProvidePlugin({ | ||||
Tooltip: 'exports-loader?Tooltip!bootstrap/js/dist/tooltip', | Tooltip: 'exports-loader?Tooltip!bootstrap/js/dist/tooltip', | ||||
Util: 'exports-loader?Util!bootstrap/js/dist/util' | Util: 'exports-loader?Util!bootstrap/js/dist/util' | ||||
}), | }), | ||||
// needed in order to use pdf.js | // needed in order to use pdf.js | ||||
new webpack.IgnorePlugin(/^\.\/pdf.worker.js$/), | new webpack.IgnorePlugin(/^\.\/pdf.worker.js$/), | ||||
new CopyWebpackPlugin([{ | new CopyWebpackPlugin([{ | ||||
from: path.resolve(nodeModules, 'pdfjs-dist/build/pdf.worker.min.js'), | from: path.resolve(nodeModules, 'pdfjs-dist/build/pdf.worker.min.js'), | ||||
to: path.resolve(__dirname, '../../static/js/') | to: path.resolve(__dirname, '../../static/js/') | ||||
}]), | }]) | ||||
].concat(testMode ? [] : [ | |||||
// for extracting all stylesheets in separate css files | |||||
new MiniCssExtractPlugin({ | |||||
filename: 'css/[name].[chunkhash].css', | |||||
chunkFilename: 'css/[name].[chunkhash].css' | |||||
}), | |||||
new GenerateWebLabelsPlugin({ | new GenerateWebLabelsPlugin({ | ||||
outputType: 'json', | outputType: 'json', | ||||
exclude: ['mini-css-extract-plugin', | exclude: ['mini-css-extract-plugin', | ||||
'bootstrap-loader'], | 'bootstrap-loader'], | ||||
srcReplace: { | srcReplace: { | ||||
'./node_modules/pdfjs-dist/build/pdf.min.js': | './node_modules/pdfjs-dist/build/pdf.min.js': | ||||
'./node_modules/pdfjs-dist/build/pdf.js', | './node_modules/pdfjs-dist/build/pdf.js', | ||||
'./node_modules/admin-lte/dist/js/adminlte.min.js': | './node_modules/admin-lte/dist/js/adminlte.min.js': | ||||
Show All 23 Lines | new GenerateWebLabelsPlugin({ | ||||
'spdxLicenseExpression': 'AGPL-3.0-or-later', | 'spdxLicenseExpression': 'AGPL-3.0-or-later', | ||||
'licenseFilePath': './LICENSE' | 'licenseFilePath': './LICENSE' | ||||
} | } | ||||
] | ] | ||||
}, | }, | ||||
loadedMathJaxJsFiles | loadedMathJaxJsFiles | ||||
) | ) | ||||
}) | }) | ||||
], | ]), | ||||
// webpack optimizations | // webpack optimizations | ||||
optimization: { | optimization: { | ||||
// ensure the vendors bundle gets emitted in a single chunk | // ensure the vendors bundle gets emitted in a single chunk | ||||
splitChunks: { | splitChunks: { | ||||
cacheGroups: { | cacheGroups: { | ||||
vendors: { | vendors: { | ||||
test: 'vendors', | test: 'vendors', | ||||
chunks: 'all', | chunks: 'all', | ||||
Show All 11 Lines |