gaja-group
/
element-web
forked from matrix/element-web
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Process images with Webpack 

This adds a `file-loader` rule to the Webpack build so that any requests for
image resource will be output into the app's output directory, but with an extra
content has appended so that we can safely use a long cache lifetime.

The CSS and SCSS rules are also changed to use `css-loader` so that any `url`
inside is automatically processed by the new image rule above.
This commit is contained in:
J. Ryan Stinnett 2018-12-31 17:22:47 -06:00
parent e3d807b053
commit 49be03e845
4 changed files with 599 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

721
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
package.json
View File

@ -33,8 +33,8 @@
"build:res": "node scripts/copy-res.js",
"build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
"build:compile": "npm run reskindex && babel --source-maps -d lib src",
"build:bundle": "cross-env NODE_ENV=production webpack-cli -p --progress --bail --mode production",
"build:bundle:dev": "webpack-cli --progress --bail --mode development",
"build:bundle": "cross-env NODE_ENV=production webpack -p --progress --bail --mode production",
"build:bundle:dev": "webpack --progress --bail --mode development",
"build:electron": "npm run clean && npm run build && npm run install:electron && build -wml --ia32 --x64",
"build:react-sdk": "node scripts/npm-sub.js matrix-react-sdk run build",
"build:js-sdk": "node scripts/npm-sub.js matrix-js-sdk run start:init",
@ -100,6 +100,7 @@
"concurrently": "^4.0.1",
"cpx": "^1.3.2",
"cross-env": "^4.0.0",
"css-loader": "^2.1.0",
"electron-builder": "^20.29.0",
"electron-builder-squirrel-windows": "^11.6.1",
"electron-devtools-installer": "^2.2.4",
@ -110,6 +111,7 @@
"eslint-plugin-flowtype": "^2.50.3",
"eslint-plugin-react": "^7.11.1",
"expect": "^1.16.0",
"file-loader": "^3.0.1",
"fs-extra": "^0.30.0",
"html-webpack-plugin": "^3.2.0",
"json-loader": "^0.5.3",
@ -136,7 +138,6 @@
"postcss-scss": "^1.0.6",
"postcss-simple-vars": "^4.1.0",
"postcss-strip-inline-comments": "^0.1.5",
"raw-loader": "^0.5.1",
"react-addons-perf": "^15.4.0",
"react-addons-test-utils": "^15.6.0",
"rimraf": "^2.4.3",

4
scripts/copy-res.js
View File

@ -53,9 +53,9 @@ const COPY_LIST = [
["res/home.html", "webapp"],
["res/home-status.html", "webapp"],
["res/home/**", "webapp/home"],
["res/vector-icons/**", "webapp/vector-icons"],
["node_modules/matrix-react-sdk/res/{fonts,img,themes,media}/**", "webapp"],
["res/themes/**", "webapp/themes"],
["res/vector-icons/**", "webapp/vector-icons"],
["node_modules/matrix-react-sdk/res/media/**", "webapp/media"],
["node_modules/emojione/assets/svg/*", "webapp/emojione/svg/"],
["node_modules/emojione/assets/png/*", "webapp/emojione/png/"],
// XXX: This is tied quite heavily to the matching olm.js so it really should be

48
webpack.config.js
View File

@ -28,23 +28,21 @@ module.exports = {
{
test: /\.scss$/,
// 1. postcss-loader turns the SCSS into normal CSS.
// 2. raw-loader turns the CSS into a javascript module
// whose default export is a string containing the CSS.
// (raw-loader is similar to css-loader, but the latter
// would also drag in the imgs and fonts that our CSS refers to
// as webpack inputs.)
// 2. css-loader turns the CSS into a JS module whose default
// export is a string containing the CSS, while also adding
// the images and fonts from CSS as Webpack inputs.
// 3. ExtractTextPlugin turns that string into a separate asset.
use: ExtractTextPlugin.extract({
use: [
"raw-loader",
"css-loader",
{
loader: 'postcss-loader',
options: {
config: {
path: './postcss.config.js'
}
}
}
path: './postcss.config.js',
},
},
},
],
}),
},
@ -52,10 +50,33 @@ module.exports = {
// this works similarly to the scss case, without postcss.
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: "raw-loader"
use: "css-loader",
}),
},
{
test: /\.(gif|png|svg|ttf)$/,
loader: 'file-loader',
options: {
// Use a content-based hash in the name so that we can set a
// long cache lifetime for assets while still delivering
// changes quickly.
name: '[name].[hash:7].[ext]',
outputPath: function(url, resourcePath, context) {
// Merge assets found via CSS and imports into a single
// tree, while also preserving directories under **/res.
const prefix = /^.*\/res\//;
const outputDir = path.dirname(resourcePath).replace(prefix, "");
return path.join(outputDir, path.basename(url));
},
publicPath: function(url, resourcePath, context) {
// Merge assets found via CSS and imports into a single
// tree, while also preserving directories under **/res.
const prefix = /^.*\/res\//;
const outputDir = path.dirname(resourcePath).replace(prefix, "");
return path.join("../..", outputDir, path.basename(url));
},
},
},
],
noParse: [
// for cross platform compatibility use [\\\/] as the path separator
@ -75,14 +96,13 @@ module.exports = {
output: {
path: path.join(__dirname, "webapp"),
// the generated js (and CSS, from the ExtractTextPlugin) are put in a
// The generated JS (and CSS, from the ExtractTextPlugin) are put in a
// unique subdirectory for the build. There will only be one such
// 'bundle' directory in the generated tarball; however, hosting
// servers can collect 'bundles' from multiple versions into one
// directory and symlink it into place - this allows users who loaded
// an older version of the application to continue to access webpack
// chunks even after the app is redeployed.
//
filename: "bundles/[hash]/[name].js",
chunkFilename: "bundles/[hash]/[name].js",
devtoolModuleFilenameTemplate: function(info) {