Webpack使用html文件中的html文字提取js

Question

我有一个这样的js文件

const link = () => {
   return '<p>my text </p>'
}

我想使用webpack返回带有的html文件：

<p>my text </p>

我需要使用哪个装载机？ 您是否有示例webpack配置？

谢谢

Answer 1

听起来您想从js文件创建HTML文件。

如果要像这样寻找“静态站点生成器”：

https://github.com/markdalgleish/static-site-generator-webpack-plugin

如果您不使用。 框架（例如react或angular），您可能不得不使用模板语言而不是handlebars或ejs 。

以下是一些有关如何开始将网站放在一起的示例：

https://github.com/markdalgleish/static-site-generator-webpack-plugin/tree/master/test/success-cases

您的index.js文件可能看起来像：

module.exports = function(locals) {
  return locals.template({ html: '<h1>' + locals.path + '</h1>' });
};

它将与template.ejs文件结合在一起，例如：

<html>
  <body>
    <%- html %>
  </body>
</html>

和一个wabpack配置文件，例如：

var StaticSiteGeneratorPlugin = require('static-site-generator-webpack-plugin');
var StatsWriterPlugin = require("webpack-stats-plugin").StatsWriterPlugin;
var ejs = require('ejs');
var fs = require('fs');

var template = ejs.compile(fs.readFileSync(__dirname + '/template.ejs', 'utf-8'))

var paths = [
  '/',
  '/foo',
  '/foo/bar'
];

module.exports = {
  entry: __dirname + '/index.js',

  output: {
    filename: 'index.js',
    path: __dirname + '/actual-output',
    libraryTarget: 'umd'
  },

  plugins: [
    new StaticSiteGeneratorPlugin({
      paths: paths,
      locals: {
        template: template
      }
    }),
    new StatsWriterPlugin() // Causes the asset's `size` method to be called
  ]
};

Webpack使用html文件中的html文字提取js

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-12-21 15:26:51

Webpack使用html文件中的html文字提取js

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-12-21 15:26:51

解决方案1
1 已采纳 2017-12-21 15:26:51