Skip to content

Instantly share code, notes, and snippets.

@stefanneculai

stefanneculai/index.html

Created November 9, 2018 13:08
Show Gist options
  • Save stefanneculai/9c734689bc88c8931d18f187d6b5a94b to your computer and use it in GitHub Desktop.
Save stefanneculai/9c734689bc88c8931d18f187d6b5a94b to your computer and use it in GitHub Desktop.
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
Loading

@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