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：
JavaScript
x
4
1
(function(){2
var a = 0;3
})();4
I need to make this code inline in html.
html:
JavaScript
1
13
13
1
<html>2
<head>3
<script>4
(function(){5
var a = 0;6
})();7
</script>8
</head>9
10
<body>11
</body>12
</html>13
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:
JavaScript
1
10
10
1
<html>2
<head>3
<!-- build:js -->4
<!-- endbuild -->5
</head>6
7
<body>8
</body>9
</html>10
gulpfile:
JavaScript
1
12
12
1
gulp.task('replace-and-inline', function () {2
return gulp.src('./dist/index.html')3
.pipe(htmlreplace({4
'js': {5
src: [your libs which you want to be inline],6
tpl: '<script src="%s" inline></script>'7
}8
}))9
.pipe(inlinesource())10
.pipe(gulp.dest('./dist/'));11
});12
In package.json, define a task, which will compile the project using webpack and then inject the js file as inline.
JavaScript
1
2
1
"build": "rimraf dist && webpack --progress --hide-modules --config build/webpack.prod.conf.js;gulp replace-and-inline"2
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.