can javascript be inline with webpack?

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

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


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()
]

Tags:

Javascript

Webpack

Recent Posts