Changeset View
Changeset View
Standalone View
Standalone View
swh/web/assets/config/webpack.config.development.js
Show All 14 Lines | |||||
const BundleTracker = require('webpack-bundle-tracker'); | const BundleTracker = require('webpack-bundle-tracker'); | ||||
const RobotstxtPlugin = require('robotstxt-webpack-plugin'); | const RobotstxtPlugin = require('robotstxt-webpack-plugin'); | ||||
const CleanWebpackPlugin = require('clean-webpack-plugin').CleanWebpackPlugin; | const CleanWebpackPlugin = require('clean-webpack-plugin').CleanWebpackPlugin; | ||||
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 ProgressBarPlugin = require('progress-bar-webpack-plugin'); | const ProgressBarPlugin = require('progress-bar-webpack-plugin'); | ||||
const FixWebpackStatsFormatPlugin = require('./webpack-plugins/fix-webpack-stats-format-plugin'); | |||||
// 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('serve')); | ||||
// 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']; | ||||
// workaround for https://github.com/webpack/webpack-dev-server/issues/2692 | |||||
if (isDevServer) { | |||||
bundles[file].unshift(`webpack-dev-server/client/index.js?http://localhost:${devServerPort}`); | |||||
} | |||||
}); | }); | ||||
// common loaders for css related assets (css, sass) | // common loaders for css related assets (css, sass) | ||||
let cssLoaders = [ | let cssLoaders = [ | ||||
MiniCssExtractPlugin.loader, | MiniCssExtractPlugin.loader, | ||||
{ | { | ||||
loader: 'cache-loader' | loader: 'cache-loader' | ||||
}, | }, | ||||
Show All 32 Lines | options: { | ||||
} | } | ||||
} | } | ||||
} | } | ||||
]; | ]; | ||||
// 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: { | ||||
type: 'memory' | |||||
}, | |||||
// set mode to development | // set mode to development | ||||
mode: 'development', | mode: 'development', | ||||
// workaround for https://github.com/webpack/webpack-dev-server/issues/2758 | |||||
target: process.env.NODE_ENV === 'development' ? 'web' : 'browserslist', | |||||
// 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) | ||||
devtool: isDevServer ? 'eval' : 'source-map', | devtool: isDevServer ? 'eval' : 'source-map', | ||||
// webpack-dev-server configuration | // webpack-dev-server configuration | ||||
devServer: { | devServer: { | ||||
clientLogLevel: 'warning', | clientLogLevel: 'warning', | ||||
port: devServerPort, | port: devServerPort, | ||||
publicPath: devServerPublicPath, | publicPath: devServerPublicPath, | ||||
// enable to serve static assets not managed by webpack | // enable to serve static assets not managed by webpack | ||||
contentBase: path.resolve('./'), | contentBase: path.resolve('./'), | ||||
// we do not use hot reloading here (as a framework like React needs to be used in order to fully benefit from that feature) | // we do not use hot reloading here (as a framework like React needs to be used in order to fully benefit from that feature) | ||||
// and prefer to fully reload the frontend application in the browser instead | // and prefer to fully reload the frontend application in the browser instead | ||||
hot: false, | hot: false, | ||||
inline: true, | inline: true, | ||||
historyApiFallback: true, | historyApiFallback: true, | ||||
headers: { | headers: { | ||||
'Access-Control-Allow-Origin': '*' | 'Access-Control-Allow-Origin': '*' | ||||
}, | }, | ||||
compress: true, | compress: true, | ||||
stats: 'errors-only', | stats: 'errors-only', | ||||
overlay: { | overlay: { | ||||
warnings: true, | warnings: true, | ||||
errors: true | errors: true | ||||
} | }, | ||||
// workaround for https://github.com/webpack/webpack-dev-server/issues/2692 | |||||
injectClient: false | |||||
}, | }, | ||||
// set entries to the bundles we want to produce | // set entries to the bundles we want to produce | ||||
entry: bundles, | entry: bundles, | ||||
// assets output configuration | // assets output configuration | ||||
output: { | output: { | ||||
path: path.resolve('./static/'), | path: path.resolve('./static/'), | ||||
filename: 'js/[name].[chunkhash].js', | filename: 'js/[name].[contenthash].js', | ||||
chunkFilename: 'js/[name].[chunkhash].js', | chunkFilename: 'js/[name].[contenthash].js', | ||||
publicPath: publicPath, | publicPath: publicPath, | ||||
// each bundle will be compiled as a umd module with its own namespace | // each bundle will be compiled as a umd module with its own namespace | ||||
// in order to easily use them in django templates | // in order to easily use them in django templates | ||||
library: ['swh', '[name]'], | library: ['swh', '[name]'], | ||||
libraryTarget: 'umd' | libraryTarget: 'umd' | ||||
}, | }, | ||||
// module resolving configuration | // module resolving configuration | ||||
resolve: { | resolve: { | ||||
▲ Show 20 Lines • Show All 211 Lines • ▼ Show 20 Lines | plugins: [ | ||||
// cleanup previously generated assets | // cleanup previously generated assets | ||||
new CleanWebpackPlugin({ | new CleanWebpackPlugin({ | ||||
cleanOnceBeforeBuildPatterns: ['**/*', '!xml', '!xml/*', '!img', '!img/*', | cleanOnceBeforeBuildPatterns: ['**/*', '!xml', '!xml/*', '!img', '!img/*', | ||||
'!img/logos', '!img/logos/*', '!img/icons', | '!img/logos', '!img/logos/*', '!img/icons', | ||||
'!img/icons/*'] | '!img/icons/*'] | ||||
}), | }), | ||||
// needed in order to use django_webpack_loader | // needed in order to use django_webpack_loader | ||||
new BundleTracker({ | new BundleTracker({ | ||||
filename: './static/webpack-stats.json' | path: path.resolve('./static/'), | ||||
filename: 'webpack-stats.json' | |||||
}), | }), | ||||
// 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 | // for extracting all stylesheets in separate css files | ||||
new MiniCssExtractPlugin({ | new MiniCssExtractPlugin({ | ||||
filename: 'css/[name].[chunkhash].css', | filename: 'css/[name].[contenthash].css', | ||||
chunkFilename: 'css/[name].[chunkhash].css' | chunkFilename: 'css/[name].[contenthash].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 | ||||
▲ Show 20 Lines • Show All 70 Lines • ▼ Show 20 Lines | new GenerateWebLabelsPlugin({ | ||||
} | } | ||||
] | ] | ||||
} | } | ||||
) | ) | ||||
}), | }), | ||||
new ProgressBarPlugin({ | new ProgressBarPlugin({ | ||||
format: chalk.cyan.bold('webpack build of swh-web assets') + ' [:bar] ' + chalk.green.bold(':percent') + ' (:elapsed seconds)', | format: chalk.cyan.bold('webpack build of swh-web assets') + ' [:bar] ' + chalk.green.bold(':percent') + ' (:elapsed seconds)', | ||||
width: 50 | width: 50 | ||||
}) | }), | ||||
new FixWebpackStatsFormatPlugin() | |||||
], | ], | ||||
// 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: { | defaultVendors: { | ||||
test: 'vendors', | test: 'vendors', | ||||
chunks: 'all', | chunks: 'all', | ||||
name: 'vendors', | name: 'vendors', | ||||
enforce: true | enforce: true | ||||
} | } | ||||
} | } | ||||
} | } | ||||
}, | }, | ||||
// disable webpack warnings about bundle sizes | // disable webpack warnings about bundle sizes | ||||
performance: { | performance: { | ||||
hints: false | hints: false | ||||
} | } | ||||
}; | }; |