Question

139

can javascript be inline with webpack?

rated 0 times [ 146] [ 7] / answers: 1 / hits: 16198 / 9 Years ago, sat, january 23, 2016, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

josefn

Add To Favorites

Follow

Total Points: 251

Total Questions: 93

Total Answers: 84

Location: Senegal

Member since Fri, Aug 21, 2020

4 Years ago

josefn questions

1 Vue 3: How to update component props value correctly using composition api?

Thu, Nov 11, 21, 00:00, 3 Years ago

1 Does Array.find method return a copy or a reference of the matched element form given array?

Sun, Jun 21, 20, 00:00, 4 Years ago

1 How to get the modulus and exponent of an RSA public key in Node.js

Wed, Apr 29, 20, 00:00, 4 Years ago

1 How to use setTimeout with a Loader

Sat, Mar 28, 20, 00:00, 4 Years ago

1 How do I implement Socket.IO in an electron app?

Fri, Feb 21, 20, 00:00, 4 Years ago

View All

answered 9 Years ago nora · Accepted 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.

https://github.com/QuellingBlade/html-webpack-inline-plugin