-
-
Notifications
You must be signed in to change notification settings - Fork 205
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Allow to inline scripts and styles #33
Comments
yyx990803
added a commit
to vuejs/vue-html-loader
that referenced
this issue
Dec 31, 2015
+1 |
1 similar comment
+1 |
michael-ciniawsky
changed the title
Handle javascript?
Transpile Feb 6, 2018
<script>
to HTML__SCRIPT___${idx}
michael-ciniawsky
changed the title
Transpile
[v1.0.0] Transpile Feb 6, 2018
<script>
to HTML__SCRIPT___${idx}
<script>
to HTML__SCRIPT___${idx}
michael-ciniawsky
changed the title
[v1.0.0] Transpile
[v1.0.0-alpha] Transpile Feb 6, 2018
<script>
to HTML__SCRIPT___${idx}
<script>
to HTML__SCRIPT___${idx}
alexander-akait
changed the title
[v1.0.0-alpha] Transpile
Allow to inline scripts and styles
Mar 18, 2020
<script>
to HTML__SCRIPT___${idx}
You do it like this, for example, for CSS I'm doing. function extract_css (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: 'style' }
], node => {
if (!node.content) {
node.tag = false;
return node;
}
const content = node.content;
const url = loaderUtils.interpolateName(this, '[hash:24]deadc0de.css', {
content,
});
loaderContext.emitFile(url, content); //here, just emit the file
node.tag = 'link';
node.attrs = {
rel: 'stylesheet',
href: url,
};
node.content = [];
return node;
});
})
.process(content, { sync: true })
.html;
} catch (error) {
loaderContext.emitError(error);
return content;
}
}
function filter_extracted_css (tag, attribute, attributes) {
return !(attributes[attribute] && attributes[attribute].indexOf('deadc0de') !== -1);
} And then ///webpack.config.js
module: {
rules: [
{
test: /\.css$/,
use: [{
loader: 'file-loader',
}, {
loader: 'extract-loader',
}, {
loader: 'css-loader',
}]
},
{
test: /\.val\.js$/,
use: [{
loader: 'raw-loader',
}, {
loader: 'extract-loader',
}, {
loader: 'html-loader',
options: {
minimize: true,
attributes: {
root: resolve(CONFIG.assetsDir),
list: [
{
tag: 'img',
attribute: 'src',
type: 'src',
filter: util.filter_extracted_file,
},
{
tag: 'link',
attribute: 'href',
type: 'src',
filter: util.filter_extracted_css,
}
],
},
preprocessor: util.extract_css,
}
}, {
loader: 'val-loader',
}]
}
]
}, Caveat, all my resources are public rooted paths like "/something.jpg" |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
would be nice if the loader converted
<script src...
and<script>...</script>
to requires.Not sure how to achieve the multiple javascript output from a single module, though.
The text was updated successfully, but these errors were encountered: