Menu
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.
403
Getting Started webpack is used to compile JavaScript modules. Once installed, you can interact with webpack either from its CLI or API. If you're still new to webpack, please read through the core concepts and this comparison to learn why you might use it over the other tools that are out in the community.
The minimum supported Node.js version to run webpack 5 is 10.13.0 (LTS) First let's create a directory, initialize npm, install webpack locally, and install the webpack-cli (the tool used to run webpack on the command line):
Custom parameters can be passed to webpack by adding two dashes between the npm run build command and your parameters, e.g. npm run build -- --color. Now that you have a basic build together you should move on to the next guide Asset Management to learn how to manage assets like images and fonts with webpack.
First let's create a directory, initialize npm, install webpack locally, and install the webpack-cli (the tool used to run webpack on the command line): Throughout the Guides we will use diff blocks to show you what changes we're making to directories, files, and code. For instance:
I've started working on a plugin for html webpack to support this. You specify regex to match files that you want to embed inline.
plugins: [
new HtmlWebpackPlugin({
inlineSource: '.(js|css)$' // embed all javascript and css inline
}),
new HtmlWebpackInlineSourcePlugin()
]
I did it without gulp, with the help of inline-source:
npm install inline-source-cli
inline attribute to the script tag in your html file: <script inline src="path/to/index.js"></script>
inline-source --root ./dist dist/path/to/index-pre.html > dist/path/to/index.html
30
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.
https://github.com/QuellingBlade/html-webpack-inline-plugin
7
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With