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), ) // ...
随机推荐
- [BZOJ2431][HAOI2009]逆序对数列(DP)
从小到大加数,根据加入的位置转移,裸的背包DP. #include<cstdio> #include<cstring> #include<algorithm> #d ...
- [转载]C++内存管理
[导语] 内存管理是C++最令人切齿痛恨的问题,也是C++最有争议的问题,C++高手从中获得了更好的性能,更大的自由,C++菜鸟的收获则是一遍一遍的检查代码和对C++的痛恨,但内存管理在C++中无处不 ...
- hdu 5195 DZY Loves Topological Sorting 线段树+拓扑排序
DZY Loves Topological Sorting Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/sho ...
- CodeM资格赛2
题目描述 组委会正在为美团点评CodeM大赛的决赛设计新赛制. 比赛有 n 个人参加(其中 n 为2的幂),每个参赛者根据资格赛和预赛.复赛的成绩,会有不同的积分.比赛采取锦标赛赛制,分轮次进行,设某 ...
- Android 动画——属性动画Property Animation
Android在3.0之前只提供了两种动画:View Animation .Drawable Animation .也就是我们在<Android 动画——Frame Animation与Twee ...
- Linear regulator=low-cost dc/dc converter
The circuit in Figure 1 is a good choice if you need a power supply with high efficiency and you don ...
- LT1946A-- Transformerless dc/dc converter produces bipolar outputs
Dual-polarity supply provides ±12V from one IC VC (Pin 1): Error Amplifier Output Pin. Tie external ...
- 2016.3 idea 注册码
idea 最新官方版本:2016.3 idea 注册码 1.下载最新idea 下载地址:https://www.jetbrains.com/idea/ 2.安装 Windows 直接下载 .exe 文 ...
- Install Linux Kernel 4.10 In CentOS and Ubuntu
https://www.ostechnix.com/install-linux-kernel-4-10-centos-ubuntu/
- sqlserver获取指定数据库的描述
SELECT 字段名= convert(varchar(100), a.name), 表名= convert(varchar(50), d.name ), 类型= CONVERT(varchar(50 ...