Просмотр исходного кода

Improve and simplify the webpack builds

I've now also figured out why loading of chunks failed when running
using converse.js (but not when using converse.min.js or when running `make watch`).

When running `make dist`, first `converse.js` and `converse.min.js` were
built with `mode` set to `development` (via `webpack.dev.js`) and then
`converse.min.js` was again built with mode set to `production` (via
`webpack.prod.js`).

When running only one build or the other (either `webpack.dev.js` or
`webpack.prod.js`) then the loading of chunks didn't fail, so it had
something to do with running both builds back to back.

I've now removed the `.dev.js` webpack config files and instead build
the minimized and non-minimized from the same config file
`webpack.build.js`.

I did the same for the headless builds.
JC Brand 3 лет назад
Родитель
Сommit
4b6626ee70

+ 5 - 4
Makefile

@@ -148,10 +148,10 @@ devserver: node_modules
 ## Builds
 ## Builds
 
 
 dist/converse.js:: node_modules
 dist/converse.js:: node_modules
-	npm run dev
+	npm run build
 
 
 dist/converse.css:: node_modules
 dist/converse.css:: node_modules
-	npm run dev
+	npm run build
 
 
 dist/website.css:: node_modules src/shared/styles/website.scss
 dist/website.css:: node_modules src/shared/styles/website.scss
 	$(SASS) --load-path=$(BOOTSTRAP) src/shared/styles/website.scss $@
 	$(SASS) --load-path=$(BOOTSTRAP) src/shared/styles/website.scss $@
@@ -191,8 +191,9 @@ src/headless/dist/converse-headless.js: src webpack/webpack.common.js node_modul
 src/headless/dist/converse-headless.min.js: src webpack/webpack.common.js node_modules @converse/headless
 src/headless/dist/converse-headless.min.js: src webpack/webpack.common.js node_modules @converse/headless
 	npm run headless
 	npm run headless
 
 
-dist:: node_modules src/* | dist/converse.js dist/converse.css dist/website.css dist/website.min.css src/headless/dist/converse-headless.min.js src/headless/dist/converse-headless.js
-	npm run prod
+dist:: node_modules src/* | dist/website.css dist/website.min.css
+	npm run headless
+	npm run build
 
 
 .PHONY: install
 .PHONY: install
 install:: dist
 install:: dist

+ 5 - 7
package.json

@@ -29,13 +29,11 @@
     "serve": "webpack serve --config webpack/webpack.serve.js",
     "serve": "webpack serve --config webpack/webpack.serve.js",
     "clean": "rm -rf node_modules dist *.zip src/headless/dist src/headless/node_modules",
     "clean": "rm -rf node_modules dist *.zip src/headless/dist src/headless/node_modules",
     "headless": "webpack --config webpack/webpack.headless.js",
     "headless": "webpack --config webpack/webpack.headless.js",
-    "headless-dev": "webpack --config webpack/webpack.headless.dev.js",
-    "nodeps": "webpack --config webpack/webpack.nodeps.js",
-    "cdn": "ASSET_PATH=https://cdn.conversejs.org/dist/ npm run dev && ASSET_PATH=https://cdn.conversejs.org/dist/ npm run build",
-    "prod": "webpack --config webpack/webpack.prod.js",
-    "build": "npm run dev && npm run prod",
-    "dev": "webpack --config webpack/webpack.dev.js",
-    "watch": "webpack --watch --config webpack/webpack.dev.js",
+    "headless-dev": "webpack --config webpack/webpack.headless.js --mode=development",
+    "cdn": "ASSET_PATH=https://cdn.conversejs.org/dist/ npm run build",
+    "build": "webpack --config webpack/webpack.build.js",
+    "dev": "webpack --config webpack/webpack.build.js --mode=development",
+    "watch": "webpack --watch --config webpack/webpack.build.js --mode=development",
     "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"
   },
   },

+ 6 - 2
webpack/webpack.prod.js → webpack/webpack.build.js

@@ -9,6 +9,7 @@ const { merge }  = require("webpack-merge");
 
 
 const plugins = [
 const plugins = [
     new MiniCssExtractPlugin({filename: '../dist/converse.min.css'}),
     new MiniCssExtractPlugin({filename: '../dist/converse.min.css'}),
+    new MiniCssExtractPlugin({filename: '../dist/converse.css'}),
     new CopyWebpackPlugin({
     new CopyWebpackPlugin({
         patterns: [
         patterns: [
             {from: 'node_modules/strophe.js/src/shared-connection-worker.js', to: 'shared-connection-worker.js'},
             {from: 'node_modules/strophe.js/src/shared-connection-worker.js', to: 'shared-connection-worker.js'},
@@ -30,12 +31,15 @@ const plugins = [
 
 
 module.exports = merge(common, {
 module.exports = merge(common, {
     plugins,
     plugins,
+    entry: {
+        "converse": path.resolve(__dirname, "../src/entry.js"),
+        "converse.min": path.resolve(__dirname, "../src/entry.js"),
+    },
     output: {
     output: {
         publicPath: ASSET_PATH,
         publicPath: ASSET_PATH,
-        filename: 'converse.min.js',
+        filename: "[name].js",
     },
     },
     mode: "production",
     mode: "production",
-    devtool: "source-map",
     module: {
     module: {
         rules: [{
         rules: [{
             test: /\.scss$/,
             test: /\.scss$/,

+ 10 - 1
webpack/webpack.common.js

@@ -1,4 +1,5 @@
 /* global __dirname, module, process */
 /* global __dirname, module, process */
+const TerserPlugin = require("terser-webpack-plugin");
 const path = require('path');
 const path = require('path');
 
 
 let bootstrap_ignore_modules = ['carousel', 'scrollspy', 'tooltip', 'toast'];
 let bootstrap_ignore_modules = ['carousel', 'scrollspy', 'tooltip', 'toast'];
@@ -14,7 +15,15 @@ module.exports = {
         path: path.resolve(__dirname, '../dist'), // Output path for generated bundles
         path: path.resolve(__dirname, '../dist'), // Output path for generated bundles
         chunkFilename: '[name].js'
         chunkFilename: '[name].js'
     },
     },
-    entry: path.resolve(__dirname, '../src/entry.js'),
+    devtool: "source-map",
+    optimization: {
+        minimize: true,
+        minimizer: [
+            new TerserPlugin({
+                include: /\.min\.js$/
+            })
+        ],
+    },
     externals: [{
     externals: [{
         "window": "window"
         "window": "window"
     }],
     }],

+ 0 - 17
webpack/webpack.dev.js

@@ -1,17 +0,0 @@
-/* global module */
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const prod = require("./webpack.prod.js");
-const { merge } = require("webpack-merge");
-
-module.exports = merge(prod, {
-    mode: "production",
-    output: {
-        filename: 'converse.js',
-    },
-    optimization: {
-        minimize: false,
-    },
-    plugins: [
-        new MiniCssExtractPlugin({filename: '../dist/converse.css'}),
-    ],
-});

+ 0 - 17
webpack/webpack.headless.dev.js

@@ -1,17 +0,0 @@
-/* global __dirname, module */
-const common = require("./webpack.common.js");
-const path = require('path');
-const { merge } = require("webpack-merge");
-
-module.exports = merge(common, {
-    mode: "development",
-    entry: "@converse/headless/headless.js",
-    output: {
-        path: path.resolve(__dirname, '../src/headless/dist'), // Output path for generated bundles
-        filename: 'converse-headless.js',
-    },
-    optimization: {
-        minimize: false,
-    },
-});
-

+ 5 - 3
webpack/webpack.headless.js

@@ -4,13 +4,15 @@ const path = require('path');
 const { merge } = require("webpack-merge");
 const { merge } = require("webpack-merge");
 
 
 module.exports = merge(common, {
 module.exports = merge(common, {
-    entry: "@converse/headless/headless.js",
+    entry: {
+        "converse-headless": "@converse/headless/headless.js",
+        "converse-headless.min": "@converse/headless/headless.js",
+    },
     output: {
     output: {
         path: path.resolve(__dirname, '../src/headless/dist'), // Output path for generated bundles
         path: path.resolve(__dirname, '../src/headless/dist'), // Output path for generated bundles
-        filename: 'converse-headless.min.js',
+        filename: "[name].js",
         chunkFilename: '[name].js'
         chunkFilename: '[name].js'
     },
     },
     mode: "production",
     mode: "production",
-    devtool: "source-map",
 });
 });
 
 

+ 2 - 27
webpack/webpack.nodeps.js

@@ -6,39 +6,14 @@ const { merge}  = require("webpack-merge");
 
 
 module.exports = merge(common, {
 module.exports = merge(common, {
     mode: "production",
     mode: "production",
-    output: {
-        filename: 'converse-no-dependencies.js'
-    },
-    optimization: {
-        minimizer: []
+    entry: {
+        "converse-no-dependencies": path.resolve(__dirname, "../src/entry.js"),
     },
     },
     plugins: [
     plugins: [
         new MiniCssExtractPlugin({filename: 'tmp.css'})
         new MiniCssExtractPlugin({filename: 'tmp.css'})
     ],
     ],
     module: {
     module: {
         rules: [
         rules: [
-        {
-            test: /\.js$/,
-            include: /src/,
-            use: {
-                loader: 'babel-loader',
-                options: {
-                    presets: [
-                        ["@babel/preset-env", {
-                            "targets": {
-                                "browsers": ["ie 11"]
-                            }
-                        }]
-                    ],
-                    plugins: [
-                        '@babel/plugin-proposal-class-properties',
-                        '@babel/plugin-proposal-nullish-coalescing-operator',
-                        '@babel/plugin-proposal-optional-chaining',
-                        '@babel/plugin-syntax-dynamic-import'
-                    ]
-                }
-            }
-        },
         {
         {
             test: /\.scss$/,
             test: /\.scss$/,
             use: [
             use: [