Commit 9f054dd7 authored by JC Brand's avatar JC Brand

Update webpack config

- hot reloading
- split config into dev and prod
parent 76f2b664
...@@ -122,7 +122,7 @@ dev: stamp-npm ...@@ -122,7 +122,7 @@ dev: stamp-npm
## Builds ## Builds
.PHONY: css .PHONY: css
css: sass/*.scss dist/converse.css dist/converse.min.css dist/website.css dist/website.min.css css: sass/*.scss dist/website.css dist/website.min.css
dist/website.css:: stamp-npm sass dist/website.css:: stamp-npm sass
$(SASS) --source-map true --include-path $(BOURBON) --include-path $(BOOTSTRAP) sass/website.scss $@ $(SASS) --source-map true --include-path $(BOURBON) --include-path $(BOOTSTRAP) sass/website.scss $@
...@@ -130,27 +130,9 @@ dist/website.css:: stamp-npm sass ...@@ -130,27 +130,9 @@ dist/website.css:: stamp-npm sass
dist/website.min.css:: stamp-npm dist/website.css dist/website.min.css:: stamp-npm dist/website.css
$(CLEANCSS) dist/website.css > $@ $(CLEANCSS) dist/website.css > $@
dist/converse.css:: stamp-npm webpack.config.js sass
npm run converse.css
dist/converse.min.css:: stamp-npm dist/converse.css
npm run converse.min.css
.PHONY: watchcss
watchcss: stamp-npm
$(NPX) webpack --type=css --mode=development --watch
.PHONY: watchjs
watchjs: stamp-npm src/headless/dist/converse-headless.js
$(NPX) webpack --mode=development --watch
.PHONY: watchjsheadless
watchjsheadless: stamp-npm
$(NPX) webpack --mode=development --watch --type=headless
.PHONY: watch .PHONY: watch
watch: stamp-npm watch: stamp-npm
make -j 3 watchcss watchjsheadless watchjs npm start
.PHONY: logo .PHONY: logo
logo: logo/conversejs-transparent16.png \ logo: logo/conversejs-transparent16.png \
......
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<!-- *********************************************************************** --> <!-- *********************************************************************** -->
<![if gte IE 11]> <![if gte IE 11]>
<link type="text/css" rel="stylesheet" media="screen" href="/dist/converse.min.css" /> <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/5.0.1/dist/converse.min.css" />
<script src="https://cdn.conversejs.org/3rdparty/libsignal-protocol.min.js"></script> <script src="https://cdn.conversejs.org/3rdparty/libsignal-protocol.min.js"></script>
<script src="https://cdn.conversejs.org/5.0.1/dist/converse.min.js"></script> <script src="https://cdn.conversejs.org/5.0.1/dist/converse.min.js"></script>
<![endif]> <![endif]>
......
This diff is collapsed.
...@@ -15,14 +15,9 @@ ...@@ -15,14 +15,9 @@
"src/" "src/"
], ],
"scripts": { "scripts": {
"converse.css": "webpack --type=css --mode=development && rm -r tmp", "start": "webpack-dev-server --config webpack.dev.js",
"converse.min.css": "npm run converse.css && cleancss --skip-rebase dist/converse.css > dist/converse.min.css",
"converse.js": "webpack --mode=development",
"converse.min.js": "npm run converse.js && webpack --mode=production",
"converse-headless.js": "webpack --mode=development --type=headless",
"converse-headless.min.js": "npm run converse-headless.js && webpack --mode=production --type=headless",
"clean": "rm -rf node_modules stamp-npm dist *.zip", "clean": "rm -rf node_modules stamp-npm dist *.zip",
"build": "npm run converse.min.css && npm run converse-headless.min.js && npm run converse.min.js", "build": "webpack --config webpack.prod.js",
"lerna": "lerna bootstrap --hoist --ignore-scripts", "lerna": "lerna bootstrap --hoist --ignore-scripts",
"prepare": "npm run lerna && npm run build" "prepare": "npm run lerna && npm run build"
}, },
...@@ -66,6 +61,7 @@ ...@@ -66,6 +61,7 @@
"bootstrap.native-loader": "2.0.0", "bootstrap.native-loader": "2.0.0",
"bourbon": "^4.3.2", "bourbon": "^4.3.2",
"clean-css-cli": "^4.3.0", "clean-css-cli": "^4.3.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.0.0", "css-loader": "^3.0.0",
"dayjs": "^1.8.15", "dayjs": "^1.8.15",
"eslint": "^6.0.1", "eslint": "^6.0.1",
...@@ -74,6 +70,7 @@ ...@@ -74,6 +70,7 @@
"fast-text-encoding": "^1.0.0", "fast-text-encoding": "^1.0.0",
"file-loader": "^4.0.0", "file-loader": "^4.0.0",
"formdata-polyfill": "^3.0.18", "formdata-polyfill": "^3.0.18",
"html-webpack-plugin": "^3.2.0",
"http-server": "^0.11.1", "http-server": "^0.11.1",
"imports-loader": "^0.8.0", "imports-loader": "^0.8.0",
"install": "^0.9.5", "install": "^0.9.5",
...@@ -99,6 +96,8 @@ ...@@ -99,6 +96,8 @@
"urijs": "^1.19.1", "urijs": "^1.19.1",
"webpack": "^4.35.3", "webpack": "^4.35.3",
"webpack-cli": "^3.3.5", "webpack-cli": "^3.3.5",
"webpack-dev-server": "^3.8.0",
"webpack-merge": "^4.2.1",
"xss": "^1.0.6" "xss": "^1.0.6"
}, },
"dependencies": {} "dependencies": {}
......
...@@ -25,6 +25,8 @@ import "converse-singleton"; ...@@ -25,6 +25,8 @@ import "converse-singleton";
import "converse-uniview"; import "converse-uniview";
/* END: Removable components */ /* END: Removable components */
import "../sass/converse.scss";
import converse from "@converse/headless/converse-core"; import converse from "@converse/headless/converse-core";
const WHITELISTED_PLUGINS = [ const WHITELISTED_PLUGINS = [
......
/*global path, __dirname, module, process */ const HTMLWebpackPlugin = require('html-webpack-plugin');
'use strict'
const minimist = require('minimist'); const minimist = require('minimist');
const path = require('path'); const path = require('path');
const webpack = require('webpack'); const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const config = { const config = {
entry: path.resolve(__dirname, 'src/converse.js'), entry: path.resolve(__dirname, 'src/converse.js'),
externals: [{ externals: [{
"window": "window" "window": "window"
}], }],
output: { plugins: [
path: path.resolve(__dirname, 'dist'), // Output path for generated bundles new HTMLWebpackPlugin({
publicPath: '/dist/', // URL base path for all assets title: 'Production',
filename: 'converse.js', template: 'webpack.html'
chunkFilename: '[name].js' })
}, ],
devtool: 'source-map',
plugins: [new MiniCssExtractPlugin({filename: '../dist/converse.css'})],
module: { module: {
rules: [ rules: [
{ {
...@@ -29,7 +25,7 @@ const config = { ...@@ -29,7 +25,7 @@ const config = {
use: "exports-loader?filterXSS,filterCSS" use: "exports-loader?filterXSS,filterCSS"
}, },
{ {
test: /templates\/.*\.(html|svg)$/, test: /\.(html|svg)$/,
exclude: /node_modules/, exclude: /node_modules/,
use: [{ use: [{
loader: 'lodash-template-webpack-loader', loader: 'lodash-template-webpack-loader',
...@@ -74,7 +70,7 @@ const config = { ...@@ -74,7 +70,7 @@ const config = {
test: /\.scss$/, test: /\.scss$/,
use: [ use: [
'style-loader', 'style-loader',
MiniCssExtractPlugin.loader, { {
loader: 'css-loader', loader: 'css-loader',
options: { options: {
sourceMap: true sourceMap: true
...@@ -83,11 +79,12 @@ const config = { ...@@ -83,11 +79,12 @@ const config = {
loader: 'sass-loader', loader: 'sass-loader',
options: { options: {
includePaths: [ includePaths: [
path.resolve(__dirname, 'node_modules/') path.resolve(__dirname, 'node_modules/'),
], ],
sourceMap: true sourceMap: true
} }
}] }
]
}, { }, {
test: /\.js$/, test: /\.js$/,
exclude: /(node_modules|spec|mockup)/, exclude: /(node_modules|spec|mockup)/,
...@@ -176,15 +173,6 @@ function parameterize () { ...@@ -176,15 +173,6 @@ function parameterize () {
}]; }];
} }
if (type === 'css') {
console.log("Building only CSS");
config.entry = path.resolve(__dirname, 'sass/converse.scss');
config.output = {
path: path.resolve(__dirname, 'tmp'),
filename: 'css-builder.js'
}
}
if (mode === 'production') { if (mode === 'production') {
console.log("Making a production build"); console.log("Making a production build");
const fn = config.output.filename; const fn = config.output.filename;
......
const merge = require("webpack-merge");
const common = require("./webpack.common.js");
module.exports = merge(common, {
mode: "development",
devtool: "inline-source-map",
devServer: {
contentBase: "./dist"
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Converse.js</title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Converse.js: A free chat client for your website" />
<link rel="shortcut icon" type="image/ico" href="favicon.ico"/>
</head>
<body class="reset"></body>
<script>
converse.plugins.add('converse-debug', {
initialize () {
const { _converse } = this;
window._converse = _converse;
}
});
converse.initialize({
auto_register_muc_nickname: true,
enable_smacks: true,
auto_away: 300,
i18n: 'af',
view_mode: 'fullscreen',
muc_respect_autojoin: true,
bosh_service_url: 'http://chat.example.org:5380/http-bind/',
websocket_url: 'ws://chat.example.org:5380/xmpp-websocket',
whitelisted_plugins: ['converse-debug'],
muc_domain: 'conference.chat.example.org',
message_archiving: 'always',
debug: true,
jid: 'klaus.dresner@chat.example.org',
password: 'secret',
auto_login: true
});
</script>
</html>
const common = require("./webpack.common.js");
const merge = require("webpack-merge");
const path = require('path');
module.exports = merge(common, {
output: {
path: path.resolve(__dirname, 'dist'), // Output path for generated bundles
publicPath: '/dist/', // URL base path for all assets
filename: 'converse.js',
chunkFilename: '[name].js'
},
mode: "production",
devtool: "source-map",
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment