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

Question

I have a js file like this 我有一个这样的js文件

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

I want to use webpack to return an html file with : 我想使用webpack返回带有的html文件：

<p>my text </p>

Which loader i need to use ? 我需要使用哪个装载机？ Do you have an example webpack config ? 您是否有示例webpack配置？

Thanks 谢谢

Answer 1

It sounds like you would like to create an HTML file from your js file. 听起来您想从js文件创建HTML文件。

If would look for 'static site generators' much like this one: 如果要像这样寻找“静态站点生成器”：

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

If you are not using a . 如果您不使用。 framework like react or angular, you may have to use a templating language instead like handlebars or ejs . 框架（例如react或angular），您可能不得不使用模板语言而不是handlebars或ejs 。

here are some examples of how to start putting the site together: 以下是一些有关如何开始将网站放在一起的示例：

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

your index.js file might look more like : 您的index.js文件可能看起来像：

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

Which would be combined with a template.ejs file like : 它将与template.ejs文件结合在一起，例如：

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

and a wabpack config file like: 和一个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