webpack 加载html模板,Webpack:从html模板加载图像
我正在尝试使用Webpack设置一个有角度的项目,但是我不知道如何从html模板中引用图像并将其包含在构建中。
我的项目树如下:
package.json
app/
- images/
- foo.png
- scripts/
- styles/
- templates/
我正在尝试html-loader与url-loader和一起使用,file-loader但这只是没有发生。
这是一个示例模板: app/templates/foo.html
问题#1
:我希望能够参考相对于的图片app/。现在,路径需要相对于模板文件,这将变得非常丑陋(../../../images/foo.png)。
问题2 :即使我指定了相对路径(如我上面所做的那样),项目也可以成功构建,但实际上没有任何反应。路径保持不变,并且中没有图像dist/。
这是我的webpack配置:
var path = require('path');
var webpack = require('webpack');
var ngminPlugin = require('ngmin-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var ngAnnotatePlugin = require('ng-annotate-webpack-plugin');
module.exports = function(config, env) {
var appRoot = path.join(__dirname, 'app/')
if(!env) env = 'development';
var webpackConfig = {
cache: true,
debug: true,
contentBase: appRoot,
entry: {
app: path.join(appRoot, '/scripts/app.coffee')
},
output: {
path: path.join(__dirname, 'dist/),
publicPath: '/',
libraryTarget: 'var',
filename: 'scripts/[name].[hash].js',
chunkFilename: '[name].[chunkhash].js'
},
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader?outputStyle=expanded&includePaths[]=./node_modules/foundation/scss/')
},
{
test: /\.coffee$/,
loader: 'coffee-loader'
},
{
loader: 'ngtemplate?relativeTo=' + (path.resolve(__dirname, './app')) + '/!html'
},
{
test: /\.png$/, loader: "url-loader?limit=100000&mimetype=image/png&name=[path][name].[hash].[ext]"
},
{
test: /\.jpg$/, loader: "file-loader?name=[path][name].[hash].[ext]"
},
{
test: /\.(woff|woff2)(\?(.*))?$/,
loader: 'url?prefix=factorynts/&limit=5000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?(.*))?$/,
loader: 'file?prefix=fonts/'
},
{
test: /\.eot(\?(.*))?$/,
loader: 'file?prefix=fonts/'
},
{
test: /\.svg(\?(.*))?$/,
loader: 'file?prefix=fonts/'
},
{
test: /\.json$/,
loader: 'json'
}
]
},
resolve: {
extensions: [
'',
'.js',
'.coffee',
'.scss',
'.css'
],
root: [appRoot],
},
singleRun: true,
plugins: [
new webpack.ContextReplacementPlugin(/.*$/, /a^/),
new webpack.ProvidePlugin({
'_': 'lodash'
}),
new ExtractTextPlugin("styles/[name].[chunkhash].css", {allChunks: true}),
new HtmlWebpackPlugin({
template: appRoot + '/app.html',
filename: 'app.html',
inject: 'body',
chunks: ['app']
})
],
devtool: 'eval'
}
if(env === 'production') {
webpackConfig.plugins = webpackConfig.plugins.concat(
new ngAnnotatePlugin(),
new webpack.optimize.UglifyJsPlugin(),
new webpack.DefinePlugin({
'process-env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin()
);
webpackConfig.devtool = false;
webpackConfig.debug = false;
}
return webpackConfig;
}
webpack 加载html模板,Webpack:从html模板加载图像相关推荐
- EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载 - 副本...
为了让页面更快完成加载, 第一时间呈现给客户端, 也为了帮助客户端节省流量资源, 我们可以开启 vue-router 提供的按需加载功能, 让客户端打开页面时, 只自动加载必要的资源文件, 当客户端操 ...
- webpack 中的加载器简介||webpack 中加载器的基本使用——1. 打包处理 css 文件 2. 打包处理 less 文件 3.打包处理 scss 文件
webpack 中的加载器 1. 通过 loader 打包非 js 模块 在实际开发过程中,webpack 默认只能打包处理以 .js 后缀名结尾的模块,其他非 .js 后缀名结尾的模块, webpa ...
- HTML加载gz文件,webpack打包的.gz文件,怎么在浏览器页面中引用
做的是 react 项目,在 webpack 中利用压缩插件 compression-webpack-plugin 将 main.bundle.js 压缩成了 main.bundle.js.gz ,看 ...
- 【Bug档案01】Spring Boot的控制器+thymeleaf模板 -使用中出现静态资源加载路径不当的问题 -解决时间:3h
[Bug档案01]Spring Boot的控制器+thymeleaf模板 -使用中出现静态资源加载路径不当的问题 -解决时间:3h 参考文章: (1)[Bug档案01]Spring Boot的控制器+ ...
- myCMS蚂蚁系统手机模板https,样式,JS加载无效
问题描述: 蚂蚁分类系统(蚂蚁CMS) 1: 单独创建手机端(m 端), 2: 绑定了 https, 3: 蚂蚁系统后台手机端已经设置成了 https ($mayimobile[mobiledomai ...
- webpack打包普通html项目,webpack打包处理
简介 ?webpack 是前端最流行的打包工具,能够做到以下: 1) 将 sass/less 等预编译的CSS语言 转化为 浏览器能够识别的 css 文件 2 )能够将多个文件(比如:多个sass文件 ...
- webpack多页应用架构 - webpack的进阶应用
如何打造一个自定义的bootstrap? 前言 一般我们用bootstrap呐,都是用的从官网或github下载下来build好了的版本,千人一脸呐多没意思.当然,官网也给我们提供了自定义的工具,如下 ...
- webpack入门(四)——webpack loader 和plugin
什么是loader loaders是你用在app源码上的转换元件.他们是用node.js运行的,把源文件作为参数,返回新的资源的函数. 例如,你可以用loaders告诉webpack加载 coffe ...
- webpack的安装及使用webpack打包js、css文件
目录 webpack介绍 前端模块化和打包概念介绍 webpack和grunt/gulp的对比 webpack和nodejs的关系 webpack安装 webpack使用示例 环境搭建 使用webpa ...
- 【WebPack】WebPack的安装、使用WebPack打包 js/css/img 等文件
目录 webpack和node和npm的关系 npm install webpack -g -g是全局的意思 项目中一般有两个文件夹: src,dist(distribution) WebPack的使 ...
最新文章
- The Innovation | Volume 3 Issue 1 正式出版
- F2etest+UIRecorder(环境搭建)【1】
- express不是内部或外部命令,也不是可运行的程序
- java类是如何加载的?不知道classLoader和双亲委派,不是一个合格的程序员
- 如何使用sdkmanager命令行接受SDK package的license
- 如何迁移mac电脑上的itunes备份iphone的文件
- eplan备份时卡顿_EPLAN卡顿了怎么办?
- SAP License:SAP低值易耗品管理
- 分享一个漂亮WPF界面框架创作过程及其源码
- 让ubuntu在一个窗口下打开多个终端的软件——terminator
- cisco 的端口聚合
- Net平台下的Mock工具---Rhino Mocks
- SSM框架-小区物业管理系统(附源码)
- BetterBackdoor多功能后门工具的部署
- php使用halt中断输出
- 奇偶数求和:输入任意个正整数(以输入负数表示结束输入),分别求出所有的奇数之和,所有的偶数之和。 示例: 输入格式:1 2 3 4 -1 输出格式:sumodd=4 sumeven=
- Dev GridView 隔行换色的方法
- [Redis实战]单文件夹启动多实例,redis哨兵+主从复制完整demo样例[windows环境]
- 微信小程序实现一个表格table
- ARKit和SceneKit
热门文章
- 2020-11-30 OpenCV人工智能图像处理学习笔记 第3章 计算机视觉加强之几何变换 warpAffine
- latex放一张大图在作者和正文之间
- 190314每日一句
- 视频方向的变换by ppt
- 你缺的不是时间而是专注力
- Atitit nlp自然语言处理类库(java python nodejs c#net) 目录 1.1. Python snownlp	1 1.2. NLP.js一个nodejs/javascri
- Atitit 文件系统概论 艾提拉著 目录 1. NTFS系统	1 1.1. NTFS文件系统概述	1 1.2. 1.1 文件系统简介 1.2 NTFS文件系统	1 1.3. 第2章
- Atitit 编程 序列化技术点 概念原理v2 1. 序列化:	1 2. 序列化的目的	1 2.1. 为了传输 或者存储	1 3. 应用场合	1 3.1. Form提交url	1 3.2. For
- Atitit.创业之uke团队规划策划 v9
- Atitit.论图片类型 垃圾文件的识别与清理 流程与设计原则 与api概要设计 v2 pbj