webpack.config.js====图片处理
更多内容已经迁移至掘金,欢迎来指导学习:
https://juejin.im/post/5d64ce915188250a985809b0
1. 安装依赖:
- cnpm install --save-dev url-loader image-webpack-loader html-loader
2. webpack.config.js规则的配置
- /*
- * url-loader:主要是图片处理和Base64编码(base64就是一串加密的字符串,而且base64编码过的图片是没有http请求的)
- * image-webpack-loader:主要是压缩图片
- * */
- {
- test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
- use: [
- {
- loader: "url-loader",
- options: {
- name: "[name]-[hash:5].min.[ext]",
- limit: , // size <= 8KB
- publicPath: "../images",
- outputPath: "./images"
- }
- },
- {
- loader: 'image-webpack-loader',
- options: {
- bypassOnDebug: true
- }
- }
- ]
- },
- //主要是处理html中的img标签的loader
- {
- test: /\.html$/,
- use: [{
- loader: 'html-loader',
- options: {
- minimize: true
- }
- }],
- }
3. 相关css文件和html文件
4. 合成雪碧图:雪碧图是为了减少网络请求,所以被处理雪碧图的图片多为各式各样的 logo 或者大小相等的小图片。而对于大图片,还是不推荐使用雪碧图。
4.1 安装依赖
- //postcss-loader和postcss-sprites则用来合成雪碧图,减少网络请求
- cnpm install --save-dev postcss-loader postcss-sprites
4.2 配置webpack.config.js文件
- //配置雪碧图
- let spritesConfig = {
- spritePath: "./dist/images"
- };
结合postcss-loader配置postcss-sprites
- // 编译css scss sass文件
- {
- test: /\.(sa|sc|c)ss$/,
- /*
- * 从右向左编译
- * style-loader:将 JS 字符串生成为 style 节点
- * css-loader:将 CSS 转化成 CommonJS 模块
- * sass-loader:// 将 Sass 编译成 CSS
- * use: ['style-loader', 'css-loader', "postcss-loader", 'sass-loader']
- * */
- use: [
- {
- loader: "style-loader",
- options: {
- singleton: false // 处理为单个style标签
- }
- },
- {
- loader: "css-loader"
- },
- {
- loader: 'postcss-loader',
- //postcss-sprites需要结合postcss-loader合成雪碧图
- options: {
- ident: "postcss",
- plugins: [require("postcss-sprites")(spritesConfig)]
- }
- },
- {
- loader: 'sass-loader'
- }
- ]
- },
- // 文本分离:配置scss
- {
- test: /\.scss$/,
- use: extractTextWebpackPlugin.extract({
- fallback: 'style-loader',
- use: [
- {loader: 'css-loader'},
- {
- loader: 'postcss-loader',
- //postcss-sprites需要结合postcss-loader合成雪碧区、图
- options: {
- ident: "postcss",
- plugins: [require("postcss-sprites")(spritesConfig)]
- }
- },
- {loader: 'sass-loader'}
- ]
- })
- },
在编译完成以后,会自动在css文件里面处理background-size和background-position,完美的显示图片
webpack.config.js====图片处理的更多相关文章
- webpack.config.js 参数简单了解
webpack.config.js文件通常放在项目的根目录中,它本身也是一个标准的Commonjs规范的模块. var webpack = require('webpack'); module.exp ...
- webpack3中文版使用参考文档--全面解析webpack.config.js
Webpack目前官方发布的最新版本是3.1.0,相对于2.0的怎么本,在语法上没有变动,只是新增了功能.使用webpack,需要事先安装node.js,并对node.js生态有一些基本的了解,比如( ...
- [js高手之路]深入浅出webpack系列2-配置文件webpack.config.js详解
接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install ...
- [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)
本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entr ...
- webpack.config.js文件的高级配置
一.多个入口文件之前我们配置的都是 一个入口 var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.Co ...
- 配置webpack.config.js中的文件
webpack.config.js文件中,主要包括 entry:入口文件 output:出口文件 module:模块 plugins:插件 这几部分 1.基本配置 运行 webpack 这一命令可以将 ...
- [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)
[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...
- webpack配置:less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件
一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm inst ...
- webpack webpack.config.js配置
安装指定版本的webpack npm install webpack@3.6 -g 安装live-server 运行项目插件 输入live-server 运行后自动打开网页 npm ins ...
随机推荐
- new types may not be defined in a return type(c++语言编译错误,处理)
在写程序的时候,定义类时要在大括号后面加上: class Point{ public: Point(int a,int b); Point(const Point &p); int getx( ...
- Hyperledger Fabric java chaincode 编译部署(1.4V)
前提条件: 构建好了一个拥有四个peer 一个Order 的1.4版本的Fabric网络. 证书通过Cryptogen生成,没有使用CA服务. 开启TLS. 网络中的peer都加入了一个 名为mych ...
- New Distinct Substrings(后缀数组)
New Distinct Substrings(后缀数组) 给定一个字符串,求不相同的子串的个数.\(n<=50005\). 显然,任何一个子串一定是后缀上的前缀.先(按套路)把后缀排好序,对于 ...
- [bzoj2743][HEOI2012]采花(树状数组)
题目描述 萧薰儿是古国的公主,平时的一大爱好是采花. 今天天气晴朗,阳光明媚,公主清晨便去了皇宫中新建的花园采花. 花园足够大,容纳了n朵花,花有c种颜色(用整数1-c表示),且花是排成一排的,以便于 ...
- ajax遍历数据生成下拉框
<script type="text/javascript"> function GetEQIDList(ModuleID) { $. ...
- IDEA mybatis-generator 逆向工程
1.在maven工程中的resource中创建generatorConfig.xml 2.配置generatorConfig.xml <?xml version="1.0" ...
- 2019.2.14 考试T1 FFT
\(\color{#0066ff}{ 题目描述 }\) 衡水二中的机房里经常有人莫名其妙地犇雷,leizi很生气,决定要找出那个犇雷的人 机房有n个人,每个人都认为机房里有两个人可能会犇雷,其中第i个 ...
- 使用git将本地代码提交到码云上去
码云为开源中国基于git的代码网络托管平台,将代码托管.开发与项目管理工具融为一体.今天第一次将自己的web项目代码上传至码云,过程中遇到一些问题,此处进行总结与过程的演示:当我们在码云上创建好项目后 ...
- MYSQL常用命令笔记(一)
1.show databases; 显示数据库 2.create database test; 创建数据库test 3.use test: 使用这个数据库 4.创建表class: create tab ...
- python 批量下载 spring 的 xsd
#coding=utf-8 import os import urllib import urllib2 import re from bs4 import BeautifulSoup # 利用 ur ...