Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

can javascript be inline with webpack?

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.

like image 403
Leon Avatar asked Jan 23 '16 09:01

Leon


People also ask

What is Webpack used for?

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.

How to run Webpack 5 on Node JS?

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):

How do I add custom parameters to a Webpack build?

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.

How do I start Webpack on the command line?

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:


Video Answer


3 Answers

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()
] 
like image 176
Dustin Jackson Avatar answered Oct 11 '22 21:10

Dustin Jackson


I did it without gulp, with the help of inline-source:

  1. Install inline-source-cli: npm install inline-source-cli
  2. Add an inline attribute to the script tag in your html file: <script inline src="path/to/index.js"></script>
  3. Run inline-source --root ./dist dist/path/to/index-pre.html > dist/path/to/index.html
like image 30
Itay Radotzki Avatar answered Oct 11 '22 20:10

Itay Radotzki


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

like image 7
Leon Avatar answered Oct 11 '22 21:10

Leon