Skip to content

Instantly share code, notes, and snippets.

@stefanneculai

stefanneculai/index.html

Created Nov 9, 2018
Star
Embed
What would you like to do?
Learn more about clone URLs
Download ZIP
Froala Editor with Webpack 4
Raw
index.html
<!doctype html>
<html>
<head>
<title>Froala with Webpack</title>
</head>
<body>
<div id="editor"></div>
<script src="dist/bundle.js"></script>
</body>
</html>
Raw
index.js
let $ = require('jquery');
window.$ = $;
window.jQuery = $;
require('froala-editor/js/froala_editor.min.js');
$('#editor').froalaEditor();
Raw
webpack.config.js
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
Copy link

rpearce commented Apr 3, 2019 •
edited

@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