How to use html-inline-css-webpack-plugin - 3 common examples

To help you get started, we’ve selected a few html-inline-css-webpack-plugin examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github feflow / builder-webpack4 / src / builder.ts View on Github external
? {
                            html5: true,
                            collapseWhitespace: true,
                            preserveLineBreaks: false,
                            minifyCSS: true,
                            minifyJS: true,
                            removeComments: false
                        }
                        : false
                }));

                // Inline 生成出来的css
                if (_inlineCSS) {
                    let pageName = path.normalize(entry).split(path.sep).pop();
                    if (pageName) {
                        cssInlinePlugins.push(new HTMLInlineCSSWebpackPlugin({
                            filter(fileName) {
                                let cssFileName = fileName;
                                if (/\.css$/.test(fileName)) {
                                    // file的hash默认是8个,如果另外定义数量请注意修改这里的截取位置(MiniCssExtractPlugin中)
                                    cssFileName = fileName.slice(0, fileName.length - 13);
                                }
                                return (pageName === cssFileName) || new RegExp(`${pageName}\.html$`).test(fileName);
                            }
                        }));
                    }
                }
            });
github feflow / builder-webpack4 / lib / builder.js View on Github external
if (options.useReact !== false) {
            // React, react-dom 通过cdn引入
            devPlugins.push(this.setExternalPlugin(options.externals));
        }
        // 增加热更新组件
        devPlugins.push(new webpack.HotModuleReplacementPlugin());
        // 抽离公共js
        // devPlugins.push(this.setCommonsChunkPlugin());
        // 多页面打包
        const {newEntry, htmlWebpackPlugins} = this.setMultiplePage(devConfig.entry, false, options.inject, false, '', '');
        devPlugins = devPlugins.concat(htmlWebpackPlugins);

        // Inline 生成出来的css
        if (options.inlineCSS) {
            devPlugins.push(new HTMLInlineCSSWebpackPlugin());
        }

        devConfig.entry = newEntry;
        // 开发阶段增加sourcemap.
        devConfig.devtool = 'inline-source-map';
        // 这里还是依然按照原来的配置,将静态资源用根目录伺服
        devConfig.output = this.setOutput(false, '', '/', options.outDir);
        devConfig.module.rules = devRules;
        devConfig.plugins = devPlugins;
        devConfig.devServer = this.setDevServer(options.port || 8001);
        devConfig.resolve.alias = this.setAlias(options.alias);
        devConfig.resolve.extensions = ['.js', '.jsx', '.ts', '.tsx', '.json'];
        // 设置 loader 的npm包查找的相对路径,包括本地node_modules、.feflow、测试环境的node_module
        devConfig.resolveLoader = this.setResolveLoaderPath(options.runtime);

        return devConfig;
github feflow / builder-webpack4 / lib / builder.js View on Github external
// React, react-dom 通过cdn引入
            prodPlugins.push(this.setExternalPlugin(options.externals));
        }
        // 抽离公共js
        /**
         * 这个地方应当支持配置
         */
        //prodPlugins.push(this.setCommonsChunkPlugin());
        // 支持Fis3的 inline 语法糖 多页面打包, 默认压缩html
        const {newEntry, htmlWebpackPlugins} = this.setMultiplePage(prodConfig.entry, options.minifyHTML, options.inject, options.inlineCSS, assetsPrefix, htmlPrefix);

        prodPlugins = prodPlugins.concat(htmlWebpackPlugins);

        // Inline 生成出来的css
        if (options.inlineCSS) {
            prodPlugins.push(new HTMLInlineCSSWebpackPlugin());
        }

        // 给生成出来的js bundle增加跨域头(cross-origin),便于错误日志记录
        prodPlugins.push(this.setSriPlugin());

        prodPlugins.push(this.setOffline(assetsPrefix, htmlPrefix, cdnUrl, serverUrl, domain, cdn, product, options.outDir));

        prodConfig.entry = newEntry;
        prodConfig.output = this.setOutput(true, assetsPrefix, cdnUrl + '/', options.outDir);
        prodConfig.module.rules = prodRules;
        prodConfig.plugins = prodPlugins;
        prodConfig.resolve.alias = this.setAlias(options.alias);
        prodConfig.resolve.extensions = ['.js', '.jsx', '.ts', '.tsx', '.json'];
        // 设置 loader 的npm包查找的相对路径,此处设置在全局的 .feflow 目录下
        prodConfig.resolveLoader = this.setResolveLoaderPath(options.runtime);

html-inline-css-webpack-plugin

☄️ A webpack plugin for convert external stylesheet to embedded stylesheet, aka document stylesheet

MIT
Latest version published 9 months ago

Package Health Score

61 / 100
Full package analysis

Popular html-inline-css-webpack-plugin functions