github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-04-05 22:11:09 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #2032 from overleaf/as-upgrade-webpack

Browse source 
Upgrade webpack to v4

GitOrigin-RevId: a92c487fee79c29c5314273bf05439c9dbb0ce4d
This commit is contained in:
Eric Mc Sween 2019-08-06 08:20:02 -04:00 committed by sharelatex
parent 2e20975f53
commit 2df7a8eaad
8 changed files with 3904 additions and 1492 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
services/web/.eslintignore
View file

@ -3,5 +3,3 @@ public/js
public/minjs
modules/**/public/js
test/unit_frontend/js
webpack.config.*
karma.conf.js

2
services/web/.prettierignore
View file

@ -3,5 +3,3 @@ public/js
public/minjs
modules/**/public/js
test/unit_frontend/js
webpack.config.*
karma.conf.js

40
services/web/karma.conf.js
View file

@ -1,6 +1,6 @@
const path = require('path')
module.exports = function (config) {
module.exports = function(config) {
config.set({
customLaunchers: {
ChromeCustom: {
@ -43,20 +43,24 @@ module.exports = function (config) {
// Configure webpack in the tests
webpack: {
module: {
rules: [{
// Pass application JS files through babel-loader, compiling to ES5
test: /\.js$/,
// Only compile application files (dependencies are in ES5 already)
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
// Configure babel-loader to cache compiled output so that subsequent
// compile runs are much faster
cacheDirectory: true
}
}]
}]
rules: [
{
// Pass application JS files through babel-loader, compiling to ES5
test: /\.js$/,
// Only compile application files (dependencies are in ES5 already)
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
// Configure babel-loader to cache compiled output so that
// subsequent compile runs are much faster
cacheDirectory: true
}
}
]
}
]
},
resolve: {
// Alias common directories in import pathnames to cut down on the
@ -82,14 +86,14 @@ module.exports = function (config) {
{ 'middleware:fake-img': ['factory', fakeImgMiddlewareFactory] }
],
reporters: ['mocha']
});
})
}
/**
* Handle fake images
*/
function fakeImgMiddlewareFactory () {
return function (req, res, next) {
function fakeImgMiddlewareFactory() {
return function(req, res, next) {
if (req.originalUrl.startsWith('/fake/')) {
return res.end('fake img response')
}

5119
services/web/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

9
services/web/package.json
View file

@ -144,7 +144,7 @@
"karma-mocha": "^1.3.0",
"karma-mocha-reporter": "^2.2.5",
"karma-requirejs": "^1.1.0",
"karma-webpack": "^2.0.9",
"karma-webpack": "^4.0.2",
"less": "^2.7.3",
"less-plugin-autoprefix": "^2.0.0",
"mkdirp": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
@ -159,8 +159,9 @@
"sinon-mongoose": "^2.3.0",
"timekeeper": "",
"translations-sharelatex": "git+https://github.com/sharelatex/translations-sharelatex.git#master",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.11.1",
"webpack-merge": "^4.1.1"
"webpack": "^4.39.0",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2",
"webpack-merge": "^4.2.1"
}
}

66
services/web/webpack.config.dev.js
View file

@ -3,43 +3,45 @@ const merge = require('webpack-merge')
const base = require('./webpack.config')
module.exports = merge(base, {
// Enable source maps for dev (fast compilation, slow runtime)
devtool: 'cheap-module-eval-source-map',
mode: 'development',
output: {
publicPath: '/public/js/es/'
},
// Enable source maps for dev (fast compilation, slow runtime)
devtool: 'cheap-module-eval-source-map',
devServer: {
// Disable webpack dev server auto-reload
inline: false,
output: {
publicPath: '/public/js/es/'
},
// Expose dev server as localhost with dev box
host: '0.0.0.0',
devServer: {
// Disable webpack dev server auto-reload
inline: false,
// Webpack-rails default port for webpack-dev-server
port: 3808,
// Expose dev server as localhost with dev box
host: '0.0.0.0',
// Allow CORS
headers: {
'Access-Control-Allow-Origin': '*'
},
// Webpack-rails default port for webpack-dev-server
port: 3808,
// Customise output to the (node) console
stats: {
colors: true, // Enable some coloured highlighting
timings: true, // Show build timing info
assets: true, // Show output bundles
warnings: true, // Show build warnings
// Hide some overly verbose output
hash: false,
version: false,
chunks: false
}
},
// Allow CORS
headers: {
'Access-Control-Allow-Origin': '*'
},
// Disable performance budget warnings as code is uncompressed in dev mode
performance: {
hints: false
}
// Customise output to the (node) console
stats: {
colors: true, // Enable some coloured highlighting
timings: true, // Show build timing info
assets: true, // Show output bundles
warnings: true, // Show build warnings
// Hide some overly verbose output
hash: false,
version: false,
chunks: false
}
},
// Disable performance budget warnings as code is uncompressed in dev mode
performance: {
hints: false
}
})

135
services/web/webpack.config.js
View file

@ -1,92 +1,83 @@
const fs = require('fs')
const path = require('path')
const webpack = require('webpack')
const MODULES_PATH = path.join(__dirname, '/modules')
const webpackENV = process.env.WEBPACK_ENV || 'development'
// Generate a hash of entry points, including modules
const entryPoints = {}
if (fs.existsSync(MODULES_PATH)) {
fs.readdirSync(MODULES_PATH).reduce((acc, module) => {
const entryPath = path.join(MODULES_PATH, module, '/public/es/index.js')
if (fs.existsSync(entryPath)) {
acc[module] = entryPath
}
return acc
}, entryPoints)
fs.readdirSync(MODULES_PATH).reduce((acc, module) => {
const entryPath = path.join(MODULES_PATH, module, '/public/es/index.js')
if (fs.existsSync(entryPath)) {
acc[module] = entryPath
}
return acc
}, entryPoints)
}
// If no entry points are found, silently exit
if (!Object.keys(entryPoints).length) {
console.warn('No entry points found, exiting')
process.exit(0)
console.warn('No entry points found, exiting')
process.exit(0)
}
module.exports = {
// Defines the "entry point(s)" for the application - i.e. the file which
// bootstraps the application
entry: entryPoints,
// Defines the "entry point(s)" for the application - i.e. the file which
// bootstraps the application
entry: entryPoints,
// Define where and how the bundle will be output to disk
// Note: webpack-dev-server does not write the bundle to disk, instead it is
// kept in memory for speed
output: {
path: path.join(__dirname, '/public/js/es'),
// Define where and how the bundle will be output to disk
// Note: webpack-dev-server does not write the bundle to disk, instead it is
// kept in memory for speed
output: {
path: path.join(__dirname, '/public/js/es'),
filename: '[name].js',
filename: '[name].js',
// Output as UMD bundle (allows main JS to import with CJS, AMD or global
// style code bundles
libraryTarget: 'umd',
// Name the exported variable from output bundle
library: ['Frontend', '[name]']
},
// Output as UMD bundle (allows main JS to import with CJS, AMD or global
// style code bundles
libraryTarget: 'umd',
// Name the exported variable from output bundle
library: ['Frontend', '[name]']
},
// Define how file types are handled by webpack
module: {
rules: [{
// Pass application JS files through babel-loader, compiling to ES5
test: /\.js$/,
// Only compile application files (dependencies are in ES5 already)
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
// Configure babel-loader to cache compiled output so that subsequent
// compile runs are much faster
cacheDirectory: true
}
}]
},
{
// These options are necesary for handlebars to have access to helper
// methods
test: /\.handlebars$/,
loader: "handlebars-loader",
options: {
compat: true,
knownHelpersOnly: false,
runtimePath: 'handlebars/runtime',
}
}]
},
resolve: {
alias: {
// makes handlerbars globally accessible to backbone
handlebars: 'handlebars/dist/handlebars.min.js',
jquery: path.join(__dirname, 'node_modules/jquery/dist/jquery'),
}
},
plugins: [
new webpack.DefinePlugin({
// Swaps out checks for NODE_ENV with the env. This is used by various
// libs to enable dev-only features. These checks then become something
// like `if ('production' == 'production')`. Minification will then strip
// the dev-only code from the bundle
'process.env': {
NODE_ENV: JSON.stringify(webpackENV)
},
})
]
// Define how file types are handled by webpack
module: {
rules: [
{
// Pass application JS files through babel-loader, compiling to ES5
test: /\.js$/,
// Only compile application files (dependencies are in ES5 already)
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
// Configure babel-loader to cache compiled output so that
// subsequent compile runs are much faster
cacheDirectory: true
}
}
]
},
{
// These options are neccesary for handlebars to have access to helper
// methods
test: /\.handlebars$/,
loader: 'handlebars-loader',
options: {
compat: true,
knownHelpersOnly: false,
runtimePath: 'handlebars/runtime'
}
}
]
},
resolve: {
alias: {
// makes handlebars globally accessible to backbone
handlebars: 'handlebars/dist/handlebars.min.js',
jquery: path.join(__dirname, 'node_modules/jquery/dist/jquery')
}
}
}

23
services/web/webpack.config.prod.js
View file

@ -1,30 +1,15 @@
const path = require('path')
const webpack = require('webpack')
const merge = require('webpack-merge')
const base = require('./webpack.config')
module.exports = merge(base, {
mode: 'production',
devtool: false,
output: {
// Override output path to minjs dir
path: path.join(__dirname, '/public/minjs/es'),
},
plugins: [
// Use UglifyJS to minimise output
new webpack.optimize.UglifyJsPlugin({
// Enable compression (options here are UglifyJS options)
compress: {
drop_console: true, // Remove console logs
warnings: false // Silence Uglify warnings
},
output: {
comments: false // Remove comments
},
// Prevent source map files from being stripped out of bundle
sourceMap: true
})
]
path: path.join(__dirname, '/public/minjs/es')
}
})