webpack 编译图片文件 file-loader
1、安装插件
npm i file-loader --save-dev
2、项目目录
3、layer.less
.layer{
width: 600px;
height: 200px;
background-color: green;
> div{
width: 400px;
height: 200px;
background:url(../../img/ais.jpg);
}
.flex{
display: flex;
}
}
index.html:
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head> <body>
<img src="src/img/ais.jpg"/>
<div id="app"> </div>
</body> </html>
4、webpack.config.js
//处理html模板
var htmlWebpackPlugin = require('html-webpack-plugin');
//处理共用、通用的js
var webpack = require('webpack');
//css单独打包
var ExtractTextPlugin = require("extract-text-webpack-plugin"); // 获取html-webpack-plugin参数的方法
var getHtmlConfig = function(name, title){
return {
template : './src/view/' + name + '.html',
filename : 'view/' + name + '.html',
favicon : './favicon.ico',
title : title,
inject : true,
hash : true,
chunks : ['common', name]
};
}; module.exports = {
// entry: './src/app.js',
entry: {
//通用模块
'common': ['./src/page/common/index.js'],
'login': ['./src/page/login/index.js'],
'index': ['./src/page/index/index.js']
},
output: {
path: __dirname + '/dist',
filename: 'js/[name].js'
},
//将外部变量或者模块加载进来
externals: {
'jquery': 'window.jQuery'
},
module: {
loaders: [{
test: /\.js$/,
//以下目录不处理
exclude: /node_modules/,
//只处理以下目录
include: /src/,
loader: "babel-loader",
//配置的目标运行环境（environment）自动启用需要的 babel 插件
query: {
presets: ['latest']
}
},
//css 处理这一块
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
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: ExtractTextPlugin.extract({
fallback: "style-loader",
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'
// }
// },
//处理图片
{
//处理图片包含有参数的图片
test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/i,
loaders: [
//小于8k的图片编译为base64，大于10k的图片使用file-loader
'url-loader?limit=8192&name=img/[name]-[hash:5].[ext]',
//图片压缩
'image-webpack-loader'
] }
]
},
plugins: [
//html模板处理
// new htmlWebpackPlugin({
// template: 'index.html',
// filename: 'index.html',
// inject:true,
// hash:true,
// chunks:['common','index']
// }),
new htmlWebpackPlugin(getHtmlConfig('index', '首页')),
new htmlWebpackPlugin(getHtmlConfig('login', '登录页')),
// 独立通用模块到js/common.js
new webpack.optimize.CommonsChunkPlugin({
//公共块的块名称
name: 'common',
//生成的文件名
filename: 'js/common.js'
}),
//css 单独打包到文件
new ExtractTextPlugin('css/[name].css')
]
}
name=img/[name]-[hash:5].[ext] 表示生成图片到想用目录下。
5、执行命令
npm run webpack
6、效果
webpack 编译图片文件 file-loader的更多相关文章
- webpack提取图片文件打包压缩
抽离图片文件打包到指定路径下 压缩抽离的图片资源 配置生成html中的图片路径 一.准备测试环境 //工作区间 src//文件夹 index.js//入口文件 index.css//样式文件 inde ...
- 关于webpack编译scss文件
css加载器文件通常和extract-text-webpack-plugin一块使用,我们可以在源文件src目录下写scss文件,然后通过webpack编译成css文件到输出目录public,这个目录 ...
- webpack 图片文件处理loader
目录结构: 引用图片: body { /*background: red;*/ /*background: url("../img/test2.jpg"); 小图片*/ backg ...
- webpack 编译模板文件
1.项目结构 安装loader: npm i html-loader --save-dev npm i ejs-loader --save-dev 2.模板文件layer.tpl <div cl ...
- webpack 打包出多个HTML文件，多个js文件，图片文件放置到指定文件夹中
一.webpack.config.js简单代码 const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { ...
- 透过现象看webpack处理css文件中图片路径转换的具体过程
webpack是目前使用比较流行的一个前端模块打包器,前端的任何资源都被当成一个模块来处理,如图片.css文件等等.在基于webpack构建的前端项目中,一般都会配置有关css文件处理的规则,这其中也 ...
- webpack学习笔记一：安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件
一 .webpack学习环境准备: 1:window系统 2:安装node.js 官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...
- VS2010遇到fatal error C1083: 无法打开预编译头文件:“xxx.pch”: No such file or directory
对C++和VS2010非常不熟悉,但是无奈赶着项目,只能看了点基础就上手,然后就碰到这个问题了. 原因分析: http://bbs.csdn.net/topics/340191697?page=1 编 ...
- c#中字节数组byte[]、图片image、流stream，字符串string、内存流MemoryStream、文件file，之间的转换
字节数组byte[]与图片image之间的转化 字节数组转换成图片 public static Image byte2img(byte[] buffer) { MemoryStream ms = ne ...
随机推荐
- 【BJOI2014】大融合【LCT】
闲着没事写篇题解 传送门 LCT维护子树的模板题 树链剖分中,子树可以用dfs序维护.但LCT你总不可能动态维护dfs序啊 LCT之所以不能直接维护子树,是因为LCT只能维护它的重儿子.我们把这棵子树 ...
- HDU 6085 Rikka with Candies（bitset）
[题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=6085 [题目大意] 给出一个数组a一个数组b,以及询问数组c, 问对于每个c有多少对a%b=c,答 ...
- px,dp,sp以及像素密度
px px(pixel): 像素,是指在由一个数字序列表示的图像中的一个最小单位.在Android中,无论屏幕密度多少,一个像素单位对应一个屏幕像素单位,不会根据屏幕密度自动缩放,因此一般不推荐使用p ...
- hdu 4114 Disney's FastPass 状压dp
Disney's FastPass Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.ph ...
- PEM DAC note
开发指南V1.0库函数版本,PWM DAC实验 350页 STM32 的定时器最快的计数频率是72Mhz,8 为分辨率的时候,PWM 频率为72M/256=281.25Khz.如果是1阶RC滤波,则要 ...
- 源码分析：动态分析 Linux 内核函数调用关系
源码分析:动态分析 Linux 内核函数调用关系 时间 2015-04-22 23:56:07 泰晓科技 原文 http://www.tinylab.org/source-code-analysi ...
- Java Http 设置代理
1.今天在Eclipse下面编译一个Http客户端时,发现可以连接局域网,连接不上外部网络,突然想起所用PC是通过代理访问网络的,设置代理后程序可以正常访问网络了: Properties props ...
- Windows 配置 Apache Python CGI
提示:安装Apache可参考 https://jingyan.baidu.com/article/0eb457e53c019f03f1a905c7.html 1. 打开URL: https://ww ...
- 怎样加入cocostudio生成的UI到项目
cocos2dx版本号:cocos2d-x-3.2alpha0 cocostudio版本号:V1.4.0.1 1.将cocostudio生成的UI文件复制到项目Resources目录 2.加入头文件, ...
- python接口自动化10-token登录
前言 有些登录不是用cookie来验证的,是用token参数来判断是否登录. token传参有两种一种是放在请求头里,本质上是跟cookie是一样的,只是换个单词而已:另外一种是在url请求参数里,这 ...