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模板文件的更多相关文章

  1. webpack 编译less/scss文件

    1.安装插件 处理less: npm install less-loader --save-dev 处理sass: npm install sass-loader --save-dev 2.项目目录: ...

  2. 关于webpack编译scss文件

    css加载器文件通常和extract-text-webpack-plugin一块使用,我们可以在源文件src目录下写scss文件,然后通过webpack编译成css文件到输出目录public,这个目录 ...

  3. WebPack系列:Webpack编译的代码如何在tomcat中使用时静态资源路径不对的问题如何解决

    问题:     使用webpack+vue做前端,使用tomcat提供api,然后npm run build之后需要将编译,生成如下文件: |   index.html \---appserver   ...

  4. webpack 编译模板文件

    1.项目结构 安装loader: npm i html-loader --save-dev npm i ejs-loader --save-dev 2.模板文件layer.tpl <div cl ...

  5. DotNetBar for Windows Forms 12.9.0.0_冰河之刃重打包版及制作Visual Studio C#项目模板文件详解

    关于 DotNetBar for Windows Forms 12.9.0.0_冰河之刃重打包版 --------------------11.8.0.8_冰河之刃重打包版-------------- ...

  6. phpcms V9 首页模板文件解析

    在了解了<phpcms V9 URL访问解析>之后,我们已经知道首页最终执行的是content模块下index控制器的init方法. 下面, 我们逐步分析过程如下: 第一.首页默认执行的是 ...

  7. phpcms V9 首页模板文件解析(转)

    转自:http://www.cnblogs.com/Braveliu/p/5100018.html 转在了解了<phpcms V9 URL访问解析>之后,我们已经知道首页最终执行的是con ...

  8. 前端模板文件化jQuery插件 $.loadTemplates

    工作中使用前端模板引擎,如 artTemplate.jsRender,来替代拼接字符串. 可是直接把模板写在页面上会带来页面臃肿,模板无法重用,与 ASP.NET等后端语言语法冲突等问题. 所以将多个 ...

  9. 引用 模块编译Makefile模板

    本文转载自geyingzhen<模块编译Makefile模板>   引用 geyingzhen 的 模块编译Makefile模板 ifneq ($(KERNELRELEASE), ) // ...

随机推荐

  1. CodeForces 1063C. Dwarves, Hats and Extrasensory Abilities 交互

    题目大意: 依次给定$n$个点的颜色,要求给定这$n$个点的坐标以及一条可以把他们分成两部分的直线 强制在线(交互) $n \leqslant 30$ 感觉自己真像一个乱搞... 我们只考虑把点放在最 ...

  2. bzoj 1857

    三分,对于单凸的函数(单调的也可以),可以找出最值. 这道题可以感性认识一下...... /****************************************************** ...

  3. bzoj 3784

    第三道点分治. 首先找到黄学长的题解,他叫我参考XXX的题解,但已经没有了,然后找到另一个博客的简略题解,没看懂,最后看了一个晚上黄学长代码,写出来然后,写暴力都拍了小数据,但居然超时,....然后改 ...

  4. PHP -- 函数基础入门

    FROM : http://www.cnblogs.com/kym/archive/2010/02/14/1668300.html, http://www.cnblogs.com/kym/archiv ...

  5. acdream 1735 输油管道 贪心

    输油管道 Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://acdream.info/problem?pid=1735 Description ...

  6. 模板方法在Spring事务中的应用

    事务对于我们来讲不并陌生,也是在实际应用中一直都在使用.在JDBC中,事务大致的使用结构如下: 开启事务 业务逻辑处理 提交事务 Spring只是对事务进行了扩展和封装使用,现在看看在内部它是如何工作 ...

  7. IIS发布站点错误收集

    转载:http://www.cnblogs.com/hangwei/p/4249406.html 本文主要收集IIS在发布站点过程中遇到的错误,并提供解决办法.并亲测可行.如果您也在使用IIS发布站点 ...

  8. mysql sql长度限制解决

    mysql sql长度限制解决   今天发现了一个错误:   Could not execute JDBC batch update   最后发现原因是SQL语句长度大于1M,而我机器上的mysql是 ...

  9. mysql知识点(三)

    1.表关联是可以利用两个表的索引的,如果是用子查询,至少第二次查询是没有办法使用索引的. 2.  为了给主查询提供数据而首先执行的查询被叫做子查询 3.如果WHERE子句的查询条件里使用了函数(WHE ...

  10. SASS输出风格

    嵌套输出方式 nested sass --watch test.scss:test.css --style nested 嵌套输出方式 expanded sass --watch test.scss: ...