arttemplate - art-template-loader在webpack中如何编译输出html文件到本地？
本文介绍了arttemplate - art-template-loader在webpack中如何编译输出html文件到本地？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
问题：我使用art-template-loader不知道怎么把编译渲染过的html输出到本地
描述：我使用这个loader只能实现最后打包一个js，然后放在页面，最后页面需要下载完加载js是渲染数据到页面上，
但是我想实现在本地编译渲染，最后输出的是一个完整的html文件，最后上线的就是渲染过后的html。但是我目前不知道怎么实现，官方文档并没有具体的操作文档。
解决方案
需要插件
使用这个插件 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
}
})
]
}这篇关于arttemplate - art-template-loader在webpack中如何编译输出html文件到本地？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
