Supporting js extraction? about extract-loader

[jhnns]

@purell It's currently not possible with webpack to import a JavaScript file into an HTML file (via <script src).

This is because webpack has been designed as JavaScript bundler. Other file types, like CSS and HTML, need to be translated to JavaScript modules first. Unfortunately, this kind of import (JS into HTML) is not easy to achieve with the current architecture. However, we're looking for ways to treat CSS and HTML as first-class citizens, but for now I just can say that this is impossible 😞.

[Luiz-Monad]

Its not impossible, just hard, you can create a loader that uses emitFile to emit the JS and remove it from the HTML. Its doable using the posthtml, its similar to what I did in the other post about removing the CSS, its the same problem. Perhaps html-loader could do this for us, someone could ping them.

Here is what I am doing.

function extract_js (content, loaderContext) {
    try {
        const loaderUtils = require('loader-utils');
        const posthtml = require('posthtml');
        return posthtml()
            .use(tree => {
                if (tree.length === 0) return tree;
                return tree.match([
                    { tag: 'script' }
                ], node => {
                    const content = node.content;
                    const url = loaderUtils.interpolateName(this, '[hash:26]c0ffee.js', {
                        content,
                    });
                    loaderContext.emitFile(url, content)
                        node.tag = false;
                        return node;
                });
            })
            .process(content, { sync: true })
            .html;
    } catch (error) {
        loaderContext.emitError(error);
        return content;
    }
}

function filter_extracted (tag, attribute, attributes) {
    return !(attributes[attribute] && attributes[attribute].indexOf('c0ffee') !== -1);
}
module.exports = { 
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [{
                    loader: 'babel-loader',
                    options: CONFIG.babel,
                }]
            },
            {
                test: /\.template$/,
                use: [{
                    loader: 'raw-loader',
                }, {
                    loader: 'extract-loader',
                }, {
                    loader: 'html-loader',
                    options: {
                        minimize: true,
                        attributes: {
                            root: resolve(CONFIG.assetsDir),
                            list: [
                                {
                                    tag: 'script',
                                    attribute: 'type',
                                    type: 'src',
                                    filter: filter_extracted_js,
                                }
                            ],
                        },
                        preprocessor: extract_js,
                    }
                }]
            }
        ]
    },
}

[heptahedron]

I forked, made the change, and all tests are still passing. Pull request to follow.

[jhnns]

I'm sorry, the extract-loader has really been designed to cope with the css-loader and the html-loader. If you're doing more sophisticated stuff, you're better off with the extract-text-webpack-plugin.

Or did the proposed change (from your PR) help your use-case?

[erakis]

@heptahedron : I'm stuck since many days trying to extract JS (script) files from HTML. Here is my attemp to get help on Stackoverflow.

@jhnns : Do you have any suggestion on how to use extract-text-pluging to achieve what we need ? I saw some PR related to this issue like #7, #20. Are they fixing the problem ? I applied those patch on my extractLoader.js from the node_modules folder but I'm now getting the error ReferenceError: require is not defined while parsing the javascript file.

Here is the only line that my javascript contains :

var $ = require("jquery");