I need to import a library to my project, the library should is a javascript file, which need to be inlined to html.
for example:
library codeļ¼
(function(){
var a = 0;
})();
I need to make this code inline in html.
html:
<html>
<head>
<script>
(function(){
var a = 0;
})();
</script>
</head>
<body>
</body>
</html>
can I implement this with webpack? I find script-loader, but it run the script, not make it inline.
Advertisement
Answer
At last, we solve this problem by combining webpack and gulp. (with two plugins: gulp-html-replace and gulp-inline-source.)
html:
<html>
<head>
<!-- build:js -->
<!-- endbuild -->
</head>
<body>
</body>
</html>
gulpfile:
gulp.task('replace-and-inline', function () {
return gulp.src('./dist/index.html')
.pipe(htmlreplace({
'js': {
src: [your libs which you want to be inline],
tpl: '<script src="%s" inline></script>'
}
}))
.pipe(inlinesource())
.pipe(gulp.dest('./dist/'));
});
In package.json, define a task, which will compile the project using webpack and then inject the js file as inline.
"build": "rimraf dist && webpack --progress --hide-modules --config build/webpack.prod.conf.js;gulp replace-and-inline"
When you want to release your project, just run npm run build
update on July.20 2018
we have made a webpack plugin to solve this issue.