javascript 可以与 webpack 内联吗？

我需要将一个库导入到我的项目中，该库应该是一个javascript文件，需要内联到html。

例如：

图书馆代码：

 (function(){
   var a = 0;
})();

我需要在 html 中内联此代码。

HTML:

 <html>
  <head>
    <script>
      (function(){
         var a = 0;
      })();
    </script>
  </head>

  <body>
  </body>
</html>

我可以用 webpack 实现吗？我找到 script-loader ，但它运行脚本，而不是使其内联。

原文由 Leon 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 608

最后，我们结合webpack和gulp解决了这个问题。（有两个插件：gulp-html-replace 和 gulp-inline-source。）

HTML:

  <html>
  <head>
    <!-- build:js -->
    <!-- endbuild -->
  </head>

  <body>
  </body>
</html>

吞咽文件：

   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/'));
    });

在 package.json 中，定义一个任务，它将使用 webpack 编译项目，然后将 js 文件作为内联注入。

 "build": "rimraf dist && webpack --progress --hide-modules --config build/webpack.prod.conf.js;gulp replace-and-inline"

当你想发布你的项目时，只需运行 npm run build

2018年7月20日更新

我们制作了一个 webpack 插件来解决这个问题。

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

原文由 Leon 发布，翻译遵循 CC BY-SA 4.0 许可协议

javascript 可以与 webpack 内联吗？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

git提交记录问题？

怎么获取动态弹出对话框的模拟单击？

什么是闭包？闭包有哪些应用场景？

element-plus的el-menu怎么修改el-sub-menu的template的B的颜色？

Stack Overflow 翻译