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 ...
随机推荐
- [BZOJ4552][TJOI2016&&HEOI2016]排序(二分答案+线段树/线段树分裂与合并)
解法一:二分答案+线段树 首先我们知道,对于一个01序列排序,用线段树维护的话可以做到单次排序复杂度仅为log级别. 这道题只有一个询问,所以离线没有意义,而一个询问让我们很自然的想到二分答案.先二分 ...
- dcoker常用命令
记录一下常用的命令 docker run -t -i xxxx /bin/bash 运行容器的交互会话shell docker start xxxx 启动容器 docker stop xxxx 停止 ...
- 《python学习手册》第35章 异常的设计
嵌套异常处理器 其实我们主要需要搞清楚的问题应该是这样的,当异常发生的时候,无论是简单的异常处理还是复杂的异常处理,我们都应该能够清楚的了解到异常运行到哪里,被谁捕获了,现在控制权到了哪里了,下面我们 ...
- c++的atoi和stoi一些区别
c++的atoi和stoi一些区别 对c++标准库中字符串转化为int的两个函数atoi()和stoi()两个有所混乱,特地研究了一下. stoi() 标准库的函数默认模板 int stoi (con ...
- python 3.x和2.x不同和改动
参考于http://www.runoob.com/python/python-2x-3x.html 因为这几天换了电脑,之前电脑里装的是python2.x,因为那时候刚学的时候,很多教程都是用2.x. ...
- JAVA容器-重点总结与深度解析
重点内容总结 问题思考 问题思考解析
- HDU 4690 EBCDIC （2013多校 1005题 胡搞题）
EBCDIC Time Limit: 2000/2000 MS (Java/Others) Memory Limit: 102400/102400 K (Java/Others)Total Su ...
- Effective JavaScript Item 51 在类数组对象上重用数组方法
Array.prototype对象上的标准方法被设计为也能够在其他对象上重用 - 即使不是继承自Array的对象. 因此,在JavaScript中存折一些类数组对象(Array-like Object ...
- warning: suggest parentheses around assignment used as truth value
编译时的警告如下:
- .NET：遇到并发问题，什么样的情况下需要自动重试？
背景 多用户系统会出现并发问题,应对并发问题的两种方式是“悲观锁”和“乐观锁”,多数情况下都会采用“乐观锁”,这引发了一个问题,如果检查出乐观并发异常如何重试?是让最终用户手工重试?还是让系统自动重试 ...