Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Froala Editor with Webpack 4
<!doctype html>
<html>
<head>
<title>Froala with Webpack</title>
</head>
<body>
<div id="editor"></div>
<script src="dist/bundle.js"></script>
</body>
</html>
let $ = require('jquery');
window.$ = $;
window.jQuery = $;
require('froala-editor/js/froala_editor.min.js');
$('#editor').froalaEditor();
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
resolve: {
modules: ['node_modules']
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
};
@rpearce

This comment has been minimized.

Copy link

rpearce commented Apr 3, 2019

@stefanneculai What would you recommend for a setup that minimizes its output? Webpack recommends using TerserPlugin and will apparently be including it as the default minimizer for webpack@5. It works fine for me with

      minimizer: [
        new TerserPlugin({
          cache: true,
          exclude: /\.min\.js$/gi,
          parallel: true,
          sourceMap: true
        }),
        // ...
      ],

but I'm really struggling with having custom plugins work (seeing a lot of t[n] is not a constructor from froala) (looks like using function instead of () => syntax played a big role here). I'll consider opening an issue, but do you have any recommendations for building for production with froala?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.