art-template-loader在webpack中如何编译输出html文件到本地？

发布于 2022-09-05 00:51:40 字数 195 浏览 19 评论 0

问题：我使用art-template-loader不知道怎么把编译渲染过的html输出到本地
描述：我使用这个loader只能实现最后打包一个js，然后放在页面，最后页面需要下载完加载js是渲染数据到页面上，
但是我想实现在本地编译渲染，最后输出的是一个完整的html文件，最后上线的就是渲染过后的html。但是我目前不知道怎么实现，官方文档并没有具体的操作文档。

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

暗恋未遂 2022-09-12 00:51:40

需要插件

使用这个插件 https://github.com/jantimon/html-webpack-plugin

配置这个参数 https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md

简单的例子

目录结构

src
- index.js
- index.art
- template.art
package.json
webpack.dev.config.js
webpack.prod.config.js

src/index.js

const template = require('./template.art')

const text = 'Hello World!'

document.getElementById('wrapper').innerHTML = template({ text: text })

src/index.art

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" >
    <title></title>
  </head>
  <body>
    <main id="wrapper"></main>
  </body>
</html>

src/template.art

<h1>{{ text }}</h1>

package.json

{
  "name": "webpackForArtTpl",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --config webpack.dev.config.js",
    "build": "webpack --config webpack.prod.config.js --progress",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "art-template": "^4.10.1",
    "art-template-loader": "^1.4.3",
    "html-webpack-plugin": "^2.28.0",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  }
}

webpack.dev.config.js

const { resolve } = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: [
    resolve(__dirname, './src/index.js')
  ],
  output: {
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /.art$/,
        use: [ 'art-template-loader' ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: resolve(__dirname, './src/index.art')
    })
  ]
}

webpack.prod.config.js

const { resolve } = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: [
    resolve(__dirname, './src/index.js')
  ],
  output: {
    path: resolve(__dirname, 'dist'),
    filename: '[chunkhash].js'
  },
  module: {
    rules: [
      {
        test: /.art$/,
        use: [ 'art-template-loader' ]
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      comments: false
    }),
    new HtmlWebpackPlugin({
      template: resolve(__dirname, './src/index.art'),
      minify: {
        collapseBooleanAttributes: true,
        collapseWhitespace: true,
        removeComments: true,
        useShortDoctype: true
      }
    })
  ]
}

回复收藏 0