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 ...
随机推荐
- [BZOJ3583]杰杰的女性朋友(矩阵快速幂)
杰杰的女性朋友 时间限制:10s 空间限制:256MB 题目描述 杰杰是魔法界的一名传奇人物.他对魔法具有深刻的洞察力,惊人的领悟力,以及令人叹为观止的创造力.自从他从事魔法竞赛以来,短短几 ...
- [CF126D]Fibonacci Sums/[BJOI2012]最多的方案
[CF126D]Fibonacci Sums/[BJOI2012]最多的方案 题目大意: 将\(n(n\le10^9)\)表示成若干个不同斐波那契数之和的形式,求方案数. 思路: 如果不考虑\(0\) ...
- LCA（最近公共祖先）--tarjan离线算法 hdu 2586
HDU 2586 How far away ? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/ ...
- Spring Bean作用域实例
在Spring中,bean作用域用于确定哪种类型的 bean 实例应该从Spring容器中返回给调用者.bean支持的5种范围域: 单例 - 每个Spring IoC 容器返回一个bean实例 原型- ...
- ubuntu上安装systemtap
http://www.cnblogs.com/hdflzh/archive/2012/07/25/2608910.html
- 使用wget提示无法建立SSL连接
wget 下载URL 提示无法建立SSL连接 解决方法: 原命令上加上" --no-check-certificate" 这是因为wget在使用HTTPS协议时,默认会去验证网站的 ...
- Lua中的元表和元方法
Lua中每个值都可具有元表. 元表是普通的Lua表,定义了原始值在某些特定操作下的行为.你可通过在值的原表中设置特定的字段来改变作用于该值的操作的某些行为特征.例如,当数字值作为加法的操作数时,Lua ...
- git hub的GUI软件配置与使用
1. 安装两个软件 1. git的命令行程序--git for windows:http://git-scm.com/download/win 2. git的GUI程序--tortoisegit:ht ...
- [转] NSMapTable 不只是一个能放weak指针的 NSDictionary
NSMapTable 不只是一个能放weak指针的 NSDictionary NSMapTable是早在Mac OS X 10.5(Leopard)的引入集合类.乍一看,这似乎是作为一个替换NSDic ...
- 把Jar文件转成exe安装文件
1.你要清楚的目标文件是32位还是64位的,如果生成的是32位,你就要使用32位的jre,如果生成的是64位,就要使用64位的jre. 图 1 在圆圈位置进行32bit或64bit的选择.因为我要创建 ...