logo
down
shadow

How to use vueisotope plugin with Vue Webpack Template (currently getting an error)


How to use vueisotope plugin with Vue Webpack Template (currently getting an error)

By : Ranjeet Kuruvilla
Date : November 20 2020, 03:01 PM
To fix this issue Got an answer from a contributer to the vue webpack template. I needed to add the aliases to build/webpack.base.conf.js:
code :
module.exports = {
  ..
  resolve: {
    ..
    alias: {
      ..
      'masonry': 'masonry-layout',
      'isotope': 'isotope-layout'
    }
  }
};


Share : facebook icon twitter icon
Webpack html-webpack-plugin load favicons in template

Webpack html-webpack-plugin load favicons in template


By : paradoxxc
Date : March 29 2020, 07:55 AM
may help you . After numerous trials...still didn't manage to make it work with html-webpack-plugin, I did find a new library that helps with everything relating to titles, descriptions, keywords,...and almost any kind of header called react-helmet
You can find it here: https://github.com/nfl/react-helmet
code :
<Helmet
    link={[
        {"rel": "apple-touch-icon", "href": require('apple-touch-icon-57x57.png'), "sizes": "57x57"}
     ]}
 />
EJS Template for webpack plugin 'html-webpack-plugin'

EJS Template for webpack plugin 'html-webpack-plugin'


By : user4934918
Date : March 29 2020, 07:55 AM
I wish this helpful for you I want to load a custom template for the plugin 'html-webpack-plugin'. , first, install the loader:
code :
npm install ejs-loader --save-dev
  plugins: [
    new HtmlwebpackPlugin({
      title: 'React Starter Kit',
      hash: true,
      inject: false,
      appMountId: 'app',
      template: 'ejs!app/assets/index.ejs'
    })
  ]
sw-precache-webpack-plugin webpack service worker default template

sw-precache-webpack-plugin webpack service worker default template


By : Reeto Dunisani
Date : March 29 2020, 07:55 AM
Does that help You are missing a specification of a caching strategy in the plugin config.
code :
plugins: [
    new SWPrecacheWebpackPlugin({
        cacheId: 'tester',
        filename: 'my-service-worker.js',
        runtimeCaching: [
        {
            urlPattern: '/',
            handler: 'cacheFirst',
        }
        ]
    })
]
html-webpack-plugin - How to insert webpack bundle.js without executing the EJS template

html-webpack-plugin - How to insert webpack bundle.js without executing the EJS template


By : sipl developer
Date : March 29 2020, 07:55 AM
wish helps you I ended up using a simple custom plugin with the information posted on one of the github issue.
code :
var fs = require("fs");
const path = require('path')

function UpdateBundleJsPlugin(options) {
    // Setup the plugin instance with options...
}

UpdateBundleJsPlugin.prototype.apply = function(compiler) {
    compiler.plugin("done", function(statsData) {
        const stats = statsData.toJson();

        if (!stats.errors.length) {
            const htmlFileName = "search.ejs";
            const html = fs.readFileSync(path.join('./views',htmlFileName), "utf8");

            // need to read the final js bundle file to replace in the distributed index.html file
            const asset = stats.assets[0];
            let htmlOutput = html.replace(/static\/.*bundle\.js/, 'static/'+asset.name);

            fs.writeFileSync(
                path.join('./views', htmlFileName),
                htmlOutput);
        }
    });
};

module.exports = UpdateBundleJsPlugin;
SyntaxError when purifying with Silverstripe templates (purifycss-webpack-plugin, webpack, Silverstripe template)

SyntaxError when purifying with Silverstripe templates (purifycss-webpack-plugin, webpack, Silverstripe template)


By : user1645710
Date : March 29 2020, 07:55 AM
Hope that helps I made it work. Just in case if someone struggles with the same problem her is my webpack config that works
code :
const glob = require('glob-all');
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const {ImageminWebpackPlugin} = require("imagemin-webpack");
const imageminOptipng = require("imagemin-optipng");
const imageminGifsicle = require("imagemin-gifsicle");
const imageminJpegtran = require("imagemin-jpegtran");
const imageminSvgo = require("imagemin-svgo");
const PurifyCSSPlugin = require("purifycss-webpack");
const PATHS = path.join(__dirname, '../../www/app/templates/');



module.exports = {
    entry: {
        app: ['./src/js/entry.js', './src/css/main.scss'],
    },
    output: {
        filename: "js/[name].min.js",
        path: path.resolve(__dirname, "./dist"),
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: /\.ss/,
                loader: 'silverstripe-template-loader'
            },
            {
                test: /\.(scss|css)$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'resolve-url-loader',
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]

            },
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['babel-preset-env']
                    }
                }
            },
            {
                test: /\.(png|svg|jpe?g|gif)$/,
                loader: 'file-loader',
                options: {
                    name: 'images/[name].[ext]',
                    publicPath: '/public/dist/',
                }
            },
        ]
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new MiniCssExtractPlugin({
            filename: 'css/[name].min.css',
            chunkFilename: "[id].css"
        }),
        new PurifyCSSPlugin({
            paths:  glob.sync([
                path.join(PATHS + 'DNADesign/Elemental/Layout/FBNewsHolder.ss'),
            ]),

        }),
        new ImageminWebpackPlugin({
            imageminOptions: {
                plugins:[
                    imageminOptipng({
                        optimizationLevel: 5
                    }),
                    imageminGifsicle({
                        interlaced: true
                    }),
                    imageminJpegtran({
                        progressive: true
                    }),
                    imageminSvgo({
                        removeViewBox: true
                    })
                ]
            }
        })
    ],
}
shadow
Privacy Policy - Terms - Contact Us © voile276.org