webpack 编译html模板文件
1、项目结构
安装loader:
npm i html-loader --save-dev
npm i ejs-loader --save-dev
2、模板文件layer.html
<div class="layer">
<div>this is a layer</div>
</div>
3、layer.js
import './layer.less';
import tpl from './layer.html';
function Layer(){
return {
name:'layer',
tpl:tpl
}
}
export default Layer;
4、app.js
import './css/common.css';
import layer from './components/layer/layer.js'
const App = function(){
var dom= document.getElementById('app');
var Layer = new layer();
dom.innerHTML = Layer.tpl;
} new App()
5、webpack.config.js
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: __dirname + '/dist',
filename: 'js/[name].js'
},
module: {
loaders: [{
test: /\.js$/,
//以下目录不处理
exclude: /node_modules/,
//只处理以下目录
include: /src/,
loader: "babel-loader",
//配置的目标运行环境(environment)自动启用需要的 babel 插件
query: {
presets: ['latest']
}
},
//css 处理这一块
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
//支持@important引入css
importLoaders: 1
}
},
{
loader: 'postcss-loader',
options: {
plugins: function() {
return [
//一定要写在require("autoprefixer")前面,否则require("autoprefixer")无效
require('postcss-import')(),
require("autoprefixer")({
"browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"]
})
]
}
}
}
]
},
//less 处理这一块
{
test: /\.less$/,
use: ['style-loader',
{
loader: 'css-loader',
options: {
//支持@important引入css
importLoaders: 1
}
},
{
loader: 'postcss-loader',
options: {
plugins: function() {
return [
//一定要写在require("autoprefixer")前面,否则require("autoprefixer")无效
require('postcss-import')(),
require("autoprefixer")({
"browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"]
})
]
}
}
},
'less-loader'
]
},
//处理html模板
{
test: /\.html$/,
use: {
loader: 'html-loader'
}
}
]
},
plugins: [
new htmlWebpackPlugin({
template: 'index.html',
filename: 'index.html'
})
]
}
6、编译
npm run webpack
7、结果
webpack 编译html模板文件的更多相关文章
- webpack 编译less/scss文件
1.安装插件 处理less: npm install less-loader --save-dev 处理sass: npm install sass-loader --save-dev 2.项目目录: ...
- 关于webpack编译scss文件
css加载器文件通常和extract-text-webpack-plugin一块使用,我们可以在源文件src目录下写scss文件,然后通过webpack编译成css文件到输出目录public,这个目录 ...
- WebPack系列:Webpack编译的代码如何在tomcat中使用时静态资源路径不对的问题如何解决
问题: 使用webpack+vue做前端,使用tomcat提供api,然后npm run build之后需要将编译,生成如下文件: | index.html \---appserver ...
- webpack 编译模板文件
1.项目结构 安装loader: npm i html-loader --save-dev npm i ejs-loader --save-dev 2.模板文件layer.tpl <div cl ...
- DotNetBar for Windows Forms 12.9.0.0_冰河之刃重打包版及制作Visual Studio C#项目模板文件详解
关于 DotNetBar for Windows Forms 12.9.0.0_冰河之刃重打包版 --------------------11.8.0.8_冰河之刃重打包版-------------- ...
- phpcms V9 首页模板文件解析
在了解了<phpcms V9 URL访问解析>之后,我们已经知道首页最终执行的是content模块下index控制器的init方法. 下面, 我们逐步分析过程如下: 第一.首页默认执行的是 ...
- phpcms V9 首页模板文件解析(转)
转自:http://www.cnblogs.com/Braveliu/p/5100018.html 转在了解了<phpcms V9 URL访问解析>之后,我们已经知道首页最终执行的是con ...
- 前端模板文件化jQuery插件 $.loadTemplates
工作中使用前端模板引擎,如 artTemplate.jsRender,来替代拼接字符串. 可是直接把模板写在页面上会带来页面臃肿,模板无法重用,与 ASP.NET等后端语言语法冲突等问题. 所以将多个 ...
- 引用 模块编译Makefile模板
本文转载自geyingzhen<模块编译Makefile模板> 引用 geyingzhen 的 模块编译Makefile模板 ifneq ($(KERNELRELEASE), ) // ...
随机推荐
- CodeForces 1063C. Dwarves, Hats and Extrasensory Abilities 交互
题目大意: 依次给定$n$个点的颜色,要求给定这$n$个点的坐标以及一条可以把他们分成两部分的直线 强制在线(交互) $n \leqslant 30$ 感觉自己真像一个乱搞... 我们只考虑把点放在最 ...
- bzoj 1857
三分,对于单凸的函数(单调的也可以),可以找出最值. 这道题可以感性认识一下...... /****************************************************** ...
- bzoj 3784
第三道点分治. 首先找到黄学长的题解,他叫我参考XXX的题解,但已经没有了,然后找到另一个博客的简略题解,没看懂,最后看了一个晚上黄学长代码,写出来然后,写暴力都拍了小数据,但居然超时,....然后改 ...
- PHP -- 函数基础入门
FROM : http://www.cnblogs.com/kym/archive/2010/02/14/1668300.html, http://www.cnblogs.com/kym/archiv ...
- acdream 1735 输油管道 贪心
输油管道 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acdream.info/problem?pid=1735 Description ...
- 模板方法在Spring事务中的应用
事务对于我们来讲不并陌生,也是在实际应用中一直都在使用.在JDBC中,事务大致的使用结构如下: 开启事务 业务逻辑处理 提交事务 Spring只是对事务进行了扩展和封装使用,现在看看在内部它是如何工作 ...
- IIS发布站点错误收集
转载:http://www.cnblogs.com/hangwei/p/4249406.html 本文主要收集IIS在发布站点过程中遇到的错误,并提供解决办法.并亲测可行.如果您也在使用IIS发布站点 ...
- mysql sql长度限制解决
mysql sql长度限制解决 今天发现了一个错误: Could not execute JDBC batch update 最后发现原因是SQL语句长度大于1M,而我机器上的mysql是 ...
- mysql知识点(三)
1.表关联是可以利用两个表的索引的,如果是用子查询,至少第二次查询是没有办法使用索引的. 2. 为了给主查询提供数据而首先执行的查询被叫做子查询 3.如果WHERE子句的查询条件里使用了函数(WHE ...
- SASS输出风格
嵌套输出方式 nested sass --watch test.scss:test.css --style nested 嵌套输出方式 expanded sass --watch test.scss: ...